发表新帖
发表新帖

Alternative for innerHTML?

前端 未结
关注
12 695
遇见更好的自我
遇见更好的自我 2020-12-04 13:34

I\'m wondering if there\'s a way to change the text of anything in HTML without using innerHTML.

Reason I\'m asking is because it\'s kinda frowned upon by the W3C. I

相关标签:
12条回答
  • Happy的楠姐
    2020-12-04 13:42

    You could use DOM as follows:

    <html>
<body>
<div>before</div>
<script type="text/javascript">
var element = document.getElementsByTagName("div")[0];
alert(element.firstChild.nodeValue);
element.removeChild(element.firstChild);
element.appendChild(document.createTextNode('after'));
alert(element.firstChild.nodeValue);
</script>
</body>

    But I think anyone rarely do this but use a framework like jQuery or Prototype or any other javascript framework out there instead. This is jquery example:

    <html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
</head>
<body>
<div>before</div>
<script type="text/javascript">
var element = $("div");
alert(element.text());
element.text("after");
alert(element.text());
</script>
</body>
    0 讨论(0)
  • 死守一世寂寞
    2020-12-04 13:44

    Well i f i understand your question properly this should be an answer.

    var text = document.getElementById("one");
//text.innerHTML = "Two";
 text.childNodes[0].nodeValue="two";
    0 讨论(0)
  • 误落风尘
    2020-12-04 13:47

    It appears to me that the CSS+HTML+JS combination should achieve desired effects:

    .myelement:before {   
    content: attr(alt);
} 

...

<span class='myelement' alt='initial value'></span> 

...

element.setAttribute('alt', 'new value');

    Does anyone know if this works in practice?

    0 讨论(0)
  • 走了就别回头了
    2020-12-04 13:48 
    var who=document.getElementById('one'), txt='new text';
if(who.innerText) who.innerText=txt;
else if(who.textContent) who.textContent= txt;

    This may be as objectionable as innerHTML to you, but it has the advantage of working in some cases (IE) where innerHTML or appendChild do not, like some table nodes, the text of style and script elements and the value of form fields

    0 讨论(0)
  • 不要未来只要你来
    2020-12-04 13:49

    Also looking for a good alternative to bypass element.innerHTML I finally found that solution:

    HTMLElement.prototype.htmlContent = function(html)
{
    var dom = new DOMParser().parseFromString('<template>'+html+'</template>', 'text/html').head;
    this.appendChild(dom.firstElementChild.content);
}

//-- document.getElementById('my-id').innerHTML = string_of_html;
document.getElementById('my-id').htmlContent(string_of_html);

    Another alternative without <template> tags, but loop instead:

    HTMLElement.prototype.htmlContent = function(html)
{
    var dom = new DOMParser().parseFromString(html, 'text/html').body;
    while (dom.hasChildNodes()) this.appendChild(dom.firstChild);
}

    Keep in mind that this method actually 'add' content when innerHTML 'replace' content...

    This may help:

    HTMLElement.prototype.clearContent = function()
{
    while (this.hasChildNodes()) this.removeChild(this.lastChild);
}

//-- document.getElementById('my-id').innerHTML = '';
document.getElementById('my-id').clearContent();

    doc: https://github.com/swannty/escaping-innerHTML
    perf: https://jsperf.com/escaping-innerhtml

    0 讨论(0)
  • 再見小時候
    2020-12-04 13:57

    You can get the same effect by manipulating the DOM. The safest way to change text is to remove all the child nodes of the element and replace them with a new text node.

    var node = document.getElementById("one");

while( node.firstChild )
    node.removeChild( node.firstChild );
node.appendChild( document.createTextNode("Two") );

    Removing the child nodes gets rid of the text content of your element before replacing it with the new text.

    The reason most developers avoid using innerHTML is that accessing elements through the DOM is standards compliant.

    0 讨论(0)
 看不清?
提交回复
热议问题