logo标签列表

在元素开始处生成innerHTML

javascripthtmlinnerhtml
3
我想在现有元素的开头生成HTML代码。
这是现有的HTML元素：
<div id="container">
  <p>end of the element</p>
</div>

使用我的当前解决方案，我将生成的元素添加到现有内容之下：
document.getElementById(container).innerHTML += "<p>start of the element</p>";

如何使用innerHTML在元素的现有内容之上添加内容？
document.getElementById(container).innerHTML = "<p>start of the element</p>" + document.getElementById(container).innerHTML; - undefined
4个回答
6
在赋值语句前面添加document.getElementById('container').innerHTML，并删除+=的简写形式。 

document.getElementById('container').innerHTML = "<p>start of the element</p>" + document.getElementById('container').innerHTML;
<div id="container">
  <p>end of the element</p>
</div>

1

有一个相对较新的函数专门用于此：insertAdjacentHTML。它有四个选项：在开标签之前 (beforeBegin)、在开标签后面 (afterBegin)、在闭标签之前 (beforeEnd) 和在闭标签后面 (afterEnd)。在您的情况下：

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>Demo</title>
</head>
<body>
    <div>
        <p>First paragraph in the code, but should become second after the Javascript fired.</p>
    </div>
    <script>
        document.querySelector('div').insertAdjacentHTML('afterBegin','<p>Second paragraph in the code, but should become first.</p>')
    </script>
</body>
</html>

0
这段代码可能有效。
var newItem = document.createElement("p");
newItem.innerHTML = "start of the element";
var container = document.getElementById("container");
var currentItem = document.getElementById("container").firstChild;
container.insertBefore(newItem, currentItem);
0
使用jQuery：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
</script>
<script>
$('#container').prepend("<p>start of element</p>");
</script>


$('#addText').click(function() {
  $('#container').prepend("<p>Prepended Text:" +
    $('#textToPrepend').val() +
    "</p>");
});
#container {
  border: 2px solid black;
  padding: 10px;
  margin: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" id="textToPrepend" /><br/>
<button id="addText">Add text to div</button>
<div id="container">
  <p> Div Container
    <p/>
</div>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接