javascript 将 HTML 作为字符串插入,不使用 JQuery
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/11422095/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Insert HTML as a String, without JQuery
提问by Serge
I'm looking for a method to insert a string, which contains HTML data, into a div element. The string is loaded via XHR, and there is no way of knowing what elements and such are in it.
我正在寻找一种将包含 HTML 数据的字符串插入到 div 元素中的方法。字符串是通过 XHR 加载的,无法知道其中包含哪些元素等。
I've searched around for a bit, and found some things that might help, but wouldn't completely work for me. What I need is something similar to the update() function from the Prototype framework: http://prototypejs.org/api/element/update
我四处搜索了一下,发现了一些可能有帮助的东西,但并不完全适合我。我需要的是类似于原型框架中的 update() 函数的东西:http: //prototypejs.org/api/element/update
The platform I'm writing for does not allow frameworks to be used, or JQuery. I'm stuck with Javascript. Anyone have any ideas?
我正在编写的平台不允许使用框架或 JQuery。我被 Javascript 困住了。有人有想法么?
I can't use innerHTML, as it does not apply any updates or functions or basically anything that's supposed to occur on load
我不能使用innerHTML,因为它不应用任何更新或功能或基本上任何应该在加载时发生的事情
I have some onload
events that need to occur, and as best I know, using innerHTML does not execute onload events. Am I incorrect?
我有一些onload
需要发生的事件,据我所知,使用 innerHTML 不会执行 onload 事件。我不正确吗?
EDIT 2 years later:
For anyone else reading, I had some serious misconceptions about the onload
event. I expected that it was a valid event for any element, while it is only valid for the <body/>
element. .innerHTML
is the proper method to do what I was looking for, and any extra functionality for the elements added, needs to be done manually some other way.
2 年后编辑:对于其他阅读的人,我对该onload
事件有一些严重的误解。我期望它对任何元素都是有效的事件,而它只对<body/>
元素有效。 .innerHTML
是做我正在寻找的正确方法,并且添加的元素的任何额外功能都需要以其他方式手动完成。
回答by CD..
HTMLElement innerHTML Property
The innerHTML property sets or returns the inner HTML of an element.
innerHTML 属性设置或返回元素的内部 HTML。
HTMLElementObject.innerHTML=text
Example: http://jsfiddle.net/xs4Yq/
回答by cybertextron
You can do it in two ways:
你可以通过两种方式做到这一点:
var insertText = document.createTextNode(theText);
document.getElementById("#myid").appendChild(insertText);
or
object.innerHTML=text
或者
object.innerHTML=text
回答by jeff
I'm looking for a method to insert a string, which contains HTML data, into a div element.
我正在寻找一种将包含 HTML 数据的字符串插入到 div 元素中的方法。
What you want to use is the innerHTMLproperty.
您要使用的是innerHTML属性。
Example of use:
使用示例:
<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'/>
回答by AddiktedDesign
do you mean like this? : http://jsfiddle.net/FgwWk/1or do you have things in the div already before adding more?
你的意思是这样吗?:http: //jsfiddle.net/FgwWk/1或者在添加更多内容之前,您是否已经在 div 中添加了内容?
回答by Andrzej Krawczuk
Plain JS. Just use: element.insertAdjacentHTML(position, text);
纯JS。只需使用: element.insertAdjacentHTML(position, text);
position = "beforebegin" | "afterbegin" | "beforeend" | "afterend"
position = "beforebegin" | “后开始” | “之前” | “事后”
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);