Question

我正在寻找一种方法，将包含HTML数据的字符串插入到div元素中。该字符串是通过XHR加载的，无法知道其中包含哪些元素等。

我搜索了一下，发现了一些可能有用的东西，但对我来说并不完全有效。我需要的是与Prototype框架中的update（）函数类似的东西： http://prototypejs.org/api/element/update

我正在编写的平台不允许使用框架或JQuery。我坚持使用Javascript。有人有什么想法吗？

我不能使用innerHTML，因为它不应用任何更新或函数或基本上应该在加载时发生的任何内容

我有一些onload事件需要发生，而且据我所知，使用innerHTML不会执行onload事件。我不对吗？

2年后编辑：对于其他人来说，我对onload事件有一些严重的误解。我希望它是任何元素的有效事件，而它只对<body/>元素有效。 .innerHTML是我正在寻找的正确方法，并且添加的元素的任何额外功能都需要以其他方式手动完成。

Answer 1

HTMLElement innerHTML Property

innerHTML属性设置或返回元素的内部HTML。

HTMLElementObject.innerHTML=text

示例：http://jsfiddle.net/xs4Yq/

Answer 2

您可以通过两种方式实现：

var insertText = document.createTextNode(theText);
                 document.getElementById("#myid").appendChild(insertText);

或 object.innerHTML=text

Answer 3

我正在寻找一种方法，将包含HTML数据的字符串插入到div元素中。

您要使用的是innerHTML属性。

使用示例：

<script type="text/javascript">
function changeText(){
    document.getElementById('boldStuff').innerHTML = '<p>Universe</p>';
}
</script>
<p>Hello <b id='boldStuff'>World</b> </p> 
<input type='button' onclick='changeText()' value='Change Text'/>

Answer 4

你是说这个意思吗？：http://jsfiddle.net/FgwWk/1或者在添加更多内容之前你是否已经在div中使用过了？

Answer 5

普通JS。只需使用：element.insertAdjacentHTML（position，text）;

position =“从头开始” | “开始之后” | “之前” | “之后”

var text = '<a  class="btn btn-blue btn-floating waves-effect">\n' +
            '<i class="fas fa-user"><span class="badge badge-danger"></span></i>\n' +
            '</a>';
var inputPlace = document.getElementById("input-pace");

inputPlace.insertAdjacentHTML("beforeend", text);

将HTML作为字符串插入，不使用JQuery

5 个答案: