Создание javascript <div> на лету

Ответ 1

Попробуйте следующее:

$("a").click(function(){
    $("#wrapper").append("<div id=" + this.id + "></div>");
});

Не тестировалось, должно работать;) где: #wrapper является родительским элементом, работайте со всеми a, как вы видите.

Ответ 2

Вам нужно будет присвоить div другому ID. Возможно, вы могли бы дать ему класс:

$("#blog").click(function() {
  $(this).after("<div class='blog'>...</div>");
  return false;
});

Это всего лишь один из многих способов создания div. Возможно, вы также захотите избежать дубликатов, но в этом случае используйте что-то вроде этого:

$("#blog").click(function() {
  var content = $("#blog_content");
  if (content.length == 0) {
    content = $("<div></div>").attr("id", "blog_content");
    $(this).after(content);
  }
  content.html("...");
  return false;
});

Что касается обработки нескольких таких ссылок, я бы сделал что-то вроде этого:

<a href="#" id="blog" class="content">Blog</a>
<a href="#" id="news" class="content">News</a>
<a href="#" id="weather" class="content">Weather</a>
<div id="content"></div>

с:

$("a.content").click(function() {
  $("#content").load('/content/' + this.id, function() {
    $(this).fadeIn();
  });
  return false;
});

Дело в том, что этот обработчик событий обрабатывает все ссылки. Это было сделано с помощью классов для селектора и идентификаторов, чтобы идентифицировать их, и это позволяет избежать слишком много манипуляций с DOOM. Если вы хотите, чтобы каждая из этих вещей в отдельном <div>, я статически создавал бы каждый из них, а не создавал их динамически. Скройте их, если вам не нужно их видеть.

Ответ 3

Попробуйте следующее:

<a  id="blog">Blog</a>
<a  id="news">news</a>
<a  id="test1">test1</a>
<a  id="test2">test2</a>

$('a').click(function()
             {
                 $('<div/>',{
                     id : this.id,
                     text : "you have clicked on : " + this.id
                 }).appendTo("#" + this.id);
             });

Ответ 4

Прежде всего, вы не должны создавать 2 элемента с одинаковым идентификатором. В вашем примере a и div будут иметь id = "blog". Не соответствует XHTML, плюс может испортить вам JS-код, если вы обратитесь к ним.

Здесь идет не-jquery-решение (добавьте это в теги script):

function addDiv (linkElement) {
  var div = document.createElement('div');
  div.id = linkElement.id;
  div.innerHTML = '<!--some content here-->';
  document.body.appendChild(div); // adds element to body
}

Затем добавьте в HTML-элемент "обработчик событий":

<a href="/home/category/blog/1" id="blog" onClick="addDiv(this); return false;">Blog</a>

Ответ 5

Этот question описывает, как создать div. Однако у вас не должно быть двух элементов с одинаковыми идентификаторами. Есть ли причина, по которой вы не можете дать ей идентификатор типа content_blog или content_news?

Ответ 6

К сожалению, если вы нажмете ссылку, страница, на которую вы переходите, не имеет представления о том, какая идея ссылки вы нажали. Единственная информация, которую он знает, - это то, что содержится в URL-адресе. Лучший способ сделать это - использовать запрос:

<a href="/home/category/blog/1?id=blog">Blog</a>

Затем, используя jQuery querystring плагин, вы можете создать div как:

$("wrapper").add("div").attr("id", $.query.get("id"));

Ответ 7

У вас не должно быть элементов на вашей странице с одинаковым идентификатором. Используйте префикс, если хотите, или, возможно, класс.

Однако ответ следующий. Я предполагаю, что ваши интерактивные ссылки находятся в div с идентификационным "меню", а ваши "на лету" divs должны быть созданы в div с идентификатором "content".

$('div#menu a').click(function(){
    $('div#content').append('<div id="content_'+this.id+'"><!-- some content here --></div>');
});

Любые проблемы, спросите в комментариях!

Ответ 8

Также существует следующая инструкция для динамического создания div.

$("<div>Hello</div>").appendTo('.appendTo');

Рабочий скрипт: https://jsfiddle.net/andreitodorut/xbym0bsu/

Ответ 9

вы можете попробовать этот код

$('body').on('click', '#btn', function() {
  $($('<div>').text('NewDive').appendTo("#old")).fadeOut(0).fadeIn(1000);
})

#old > div{
  width: 100px;
  background: gray;
  color: white;
  height: 20px;
  font: 12px;
  padding-left: 4px;
  line-height: 20px;
  margin: 3px;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Test</title>
    <link rel="stylesheet" href="./index.css">
  </head>
  <body>
    <div>
      <!-- Button trigger modal -->
      <button type="button" id="btn">Create Div</button>
      <div id="old">

      </div>
    </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  </body>
</html>