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

Question

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

我四处搜索了一下，发现了一些可能有帮助的东西，但对我来说并不完全有效。我需要的是类似于原型框架中的 update() 函数的东西：http: //prototypejs.org/api/element/update

我正在编写的平台不允许使用框架或 JQuery。我被 Javascript 困住了。有人有想法么？

我不能使用innerHTML，因为它不应用任何更新或功能，或者基本上任何应该在加载时发生的事情

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

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

Answer 1

HTMLElement innerHTML 属性

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);

位置=“开始之前”| "之后" | “提前” | “事后”

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);