使用javascript在列表的最后一个子项后添加自定义html

我试图使用javascript在无序列表的最后一个子元素之后添加一个自定义div，结果基本上如下所示

<ul class="mylist">
 <li> content </li>
 <li> content </li>
 <li> content </li>
 <li> content </li>
 <div>custom div</div>
<ul> 

内容
内容
内容
内容
自定义分区

我已经走了这么远，但不知道这是否是正确的解决方案。 我不能让它工作

$( document ).ready(function() {
document.getElementByClassName("myList").lastChild.innerHTML = "<h1>test</h1>";
}

$（文档）.ready（函数（）{
document.getElementByClassName（“myList”）.lastChild.innerHTML=“test”；
}

您可以使用

jquery

并附加

div

，尽管这不是有效的标记。动态添加子元素。

$（函数（）{
//这是

$（'.mylist'）.append（'
自定义内容1
自定义内容2
'）；
//这是无效的标记，但您要求了
$（'.mylist'）.append（'custom content 1 custom content 2'）；
})

内容
内容
内容
内容
使用
querySelector
和
insertAdjacentHTML
方法实现本机DOM


document.querySelector（'.mylist>li:last child'）
.insertAdjacentHTML（'afterend'，'
测试
'）

内容
内容
内容
内容
要插入div，作为ul的孩子的div在html中是无效的。您需要先添加列表，然后将div放在列表中，类似下面的内容

<ul class="mylist">
 <li> content </li>
 <li> content </li>
 <li> content </li>
 <li> content </li>
 <li>
     <div>custom div</div>
</li>
<ul>


内容
内容
内容
内容

自定义分区



由于您的列表子项是一个列表，那么您的脚本可以追加，因此用
test
替换
custom div
应该是这样的，因为我们追加的是最后一个li标记的内部

$( document ).ready(function() {
document.getElementByClassName("myList")
 .lastChild.innerHTML = "<h1>test</h1>";
}

$（文档）.ready（函数（）{
document.getElementByClassName（“myList”）
.lastChild.innerHTML=“测试”；
}

这样，您的标记是有效的，并且测试是在浏览器上呈现的
这是无效的html标记。.只有LI是ul的子项不是您问题的真正答案，但您不想这样做。
div
作为
ul
的子项根本无效。您可以在末尾添加一个新的
LI
，或者在最后一项中添加一些内容
li
虽然如此。如果您在DOM检查器中检查HTML输出，您可以看到结果有多糟糕。
div
不能是
ul
的子对象，正如我所说，这不是一个有效的标记。@Rorymcrossanf首先，您只是编辑了它以包含该注释。其次，为什么不在您的答案中修复它？这是一个失败的解决方案在reason@JanHenriksen自从jquery版本1.4以来，添加了
append（）
函数。请阅读此处的jquery API和版本。@JanHenriksen使用
append（）时会遇到什么问题
？控制台中是否显示任何错误？谢谢。querySelector似乎对我有效。append函数不起作用，可以找出原因。什么是
getElementByClassName
？有
getElement**s**ByClassName
返回用
HTMLCollection
包装的多个元素。最后一个子级应始终返回o集合中的ne标记尝试您的代码。首先，
document.getElementByClassName（“myList”）
抛出TypeError，因为没有
getElementByClassName
这样的东西。即使您修复了这个打字错误，您也会得到
HTMLCollection
，它没有
lastChild