在元素后插入 html 代码

Insert html code after element

本文关键字：html 代码 插入 元素      更新时间：2023-09-26

我有一个看起来像这样的html文档：

...html code...
<ul id="my_ul">
...html code...

使用javascript，我想在文档中插入下面的html代码，紧接着<ul id="my_ul">： 

<li><span>Some text</span><ul>

到目前为止，我有这个，但没有预期的结果。拜托，我做错了什么？

var para1 = document.createElement("li");
var para2 = document.createElement("span");
var node = document.createTextNode("Some text");
para2.appendChild(node);
var para3 = document.createElement("ul");
var element = document.getElementById("my_ul");
element.appendChild(para1);
element.appendChild(para2);
element.appendChild(para3);

如果你想要更短的代码而不为每个html元素创建对象，只需这样做：

var element = document.getElementById("my_ul");
var html = '<li><span>Some text</span></li>'; 
element.innerHTML = html + element.innerHTML;

像这样：

var ul = document.getElementById("my_ul");
var li   = document.createElement("li");
var span = document.createElement("span");
var text = document.createTextNode("Some text");
span.appendChild(text);
li.appendChild(span);
ul.appendChild(li);
<ul id="my_ul">
</ul>

这是你想做的吗？

演示：小提琴

var para1 = document.createElement("li");
var para2 = document.createElement("span");
var node = document.createTextNode("Some text");
para2.appendChild(node);
para1.appendChild(para2);
element = document.getElementById("my_ul");
element.appendChild(para1);

您的代码执行以下操作：

element.appendChild(para1);
使列表项

成为原始列表的子项

element.appendChild(para2);

使范围成为原始列表的子项

element.appendChild(para3);

使新列表成为原始列表的子列表

您需要将每个元素附加到要成为其父级的元素中，而不是将所有元素附加到原始列表中。

将element替换为适当的变量。 

$(document).ready(function(){
 
var para1 = document.createElement("li");
var para2 = document.createElement("span");
var node = document.createTextNode("Some text");
para2.appendChild(node);
   
var element = document.getElementById("my_ul");
element.appendChild(para1);
para1.appendChild(para2);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul id="my_ul">
</ul>

var ul = document.getElementById("my_ul");
var li = document.createElement("li");
var span = document.createElement("span");
var textNode = document.createTextNode("Some text");
span.appendChild(textNode);
li.appendChild(span);
ul.appendChild(li);
相关文章：