Question

当我使用document.createElement时，javascript会在body的底部添加一个元素。如何在特定位置添加元素？（使用document.createElement属性，我的意思是存储在一个新变量中）

Answer 1

当我使用document.createElement时，javascript将添加一个元素身体的底部。

不，返回一个元素，但它没有附加到任何内容。你需要自己做：

var ptag = document.createElement('p');
ptag.innerHTML = "hello world";
var someplace = document.getElementById('some_element_id');
someplace.appendChild(ptag);

那是普通的js; jquery技术很简洁。

Answer 2

<html>
<head>
</head>
<script type="text/javascript">
var my_div = null;
var newDiv = null;

function addElement()
{

  newDiv = document.createElement("div");
  newContent = document.createTextNode("test");
  newDiv.appendChild(newContent);


  my_div = document.getElementById("org_div1");
  document.body.insertBefore(newDiv, my_div);
}

</script>

<body onload="addElement()">
<div id='org_div1'> The text above has been created dynamically.</div>
</body>
</html>

Answer 3

您可以使用jquery在任何DOM元素的开头或结尾添加dom / Element。

见下面的例子

<!-- HTML CODE -->
<div id="item">
this is only test
</div>

JQUERY脚本：

$(document).ready(function(){

    var item = "<span>New item</span>"
    /* PrependTo */
    $(item).prependTo('#item');

    /* AppendTo */
    $(item).appendTo('#item');


});

请参阅jquery文档here和here

Answer 4

嗯，我可能错了，但是如果你使用jQuery，你是否正在寻找类似的东西：

var newDiv = $("<div />");

此外，如果你有一个jQuery列表中的元素（一个对象数组），如$(".divs")，它们作为[[Object Object], [Object Object]]进行处理（而每个[Object Object]是一个包含类.divs的div元素）您可以通过执行

向该列表中添加一个新元素（不粘贴到html正文）

$(".divs").add(newDiv);

Answer 5

只需将元素添加为另一个元素的子元素。

例如：

HTML

<body>
<div id="container"></div>
...
[page content here]
...
</body>

JS

newdiv = $("<div>something</div>");
$("#container").append(newdiv);

请参阅documentation of append

在某个地方添加元素

5 个答案: