web-dev-qa-db-ja.com

innerHTMLの代替？

InnerHTMLを使用せずにHTMLのテキストを変更する方法があるかどうか疑問に思っています。

私が求めている理由は、それがW3Cによってちょっと眉をひそめられているからです。私はそれがちょっとした選択であることを知っていますが、私はただ知りたいです、方法がありますか？

編集：人々は私がここで尋ねていることを誤解しているようです：表示されているテキストを効果的に変更する方法を見つけたいです。

私が持っている場合：

<div id="one">One</a>

innerHTMLでこれを行うことができます。

var text = document.getElementsById("one");
text.innerHTML = "Two";

そして、画面上のテキストが変更されます。
これ以上テキストを追加したくありません。既存のテキストをすべて変更したいです。

javascriptw3cinnerhtml
37
KdgDev

推奨される方法はDOM操作によるものですが、非常に冗長になる可能性があります。例えば：

// <p>Hello, <b>World</b>!</p>
var para = document.createElement('p');
para.appendChild(document.createTextNode('Hello, '));

// <b>
var b = document.createElement('b');
b.appendChild(document.createTextNode('World');
para.appendChild(b);

para.appendChild(document.createTextNode('!'));

// Do something with the para element, add it to the document, etc.

編集

編集に応じて、現在のコンテンツを置き換えるには、既存のコンテンツを削除してから、上記のコードを使用して新しいコンテンツを入力します。例えば：

var someDiv = document.getElementById('someID');
var children = someDiv.childNodes;
for(var i = 0; i < children.length; i++)
    someDiv.removeChild(children[i]);

しかし、他の誰かが言ったように、代わりにjQueryのようなものを使用することをお勧めします。すべてのブラウザがDOMを完全にサポートしているわけではなく、JavaScriptライブラリによって内部的に処理される奇妙なブラウザもあります。たとえば、jQueryは次のようになります。

$('#someID').html("<p>Hello, <b>World</b>!</p>");
37
Turnor

より良い方法は document.createTextNode 。 innerHTMLの代わりにこの関数を使用する主な理由の1つは、単にinnerHTMLを設定する場合は文字列をエスケープする必要があるのに対して、すべてのHTML文字のエスケープが処理されることです。 。

12
Andrew Hare

DOMを操作することで同じ効果を得ることができます。テキストを変更する最も安全な方法は、要素のすべての子ノードを削除し、それらを新しいテキストノードに置き換えることです。

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

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

子ノードを削除すると、要素のテキストコンテンツが削除されてから、新しいテキストに置き換えられます。

ほとんどの開発者がinnerHTMLの使用を避ける理由は、DOMを介した要素へのアクセスが標準に準拠しているためです。

7
Bill the Lizard

プレーンテキストのみを変更する場合は、標準に依存するより迅速なソリューションがあります。

document.getElementById("one").firstChild.data = "two";

とにかく、innerHTMLは今後のHTML 5標準の一部になることに注意してください。

7
Ionuț G. Stan

シンプル。

置換text.innerHTML = 'two' with text.firstChild.nodeValue = 'two'。

5
BlackMagic
var who=document.getElementById('one'), txt='new text';
if(who.innerText) who.innerText=txt;
else if(who.textContent) who.textContent= txt;

これは、innerHTMLと同じくらい好ましくないかもしれませんが、一部のテーブルノード、スタイルおよびスクリプト要素のテキスト、フォームフィールドの値のように、innerHTMLまたはappendChildが動作しない場合（IE）で動作するという利点があります

2
kennebec

次のようにDOMを使用できます。

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

しかし、誰もこれを行うことはめったにないと思いますが、 jQuery や Prototype などのフレームワーク、または there のような他のjavascriptフレームワークを使用します。これはjqueryの例です。

<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>
1
Sergej Andrejev

あなたの質問を適切に理解していれば、これが答えになるはずです。

var text = document.getElementById("one");
//text.innerHTML = "Two";
 text.childNodes[0].nodeValue="two";
1
Shamik

私には、CSS + HTML + JSの組み合わせが望ましい効果を達成するはずだと思われます。

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

...

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

...

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

これが実際に機能するかどうかは誰にもわかりますか？

1
ilya n.

また、element.innerHTMLをバイパスするための優れた代替手段を探しています。

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

<template>タグなしの別の代替案ですが、代わりにループします：

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

InnerHTMLがコンテンツを「置換」する場合、このメソッドは実際にコンテンツを「追加」することに注意してください...

これは役立つかもしれません：

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

1
user7674857

定期的に更新する場合は、テキストノードへの直接参照を保存しておくと役立つことがあります。私はこのようなことをします：

var dynamicText = myDiv.appendChild(document.createTextNode("the initial text"));

そして、それを更新する必要があるときはいつでも、私はこれをするだけです：

dynamicText.nodeValue = "the updated text";

これにより、DOMを歩いたり、子を追加または削除する必要がなくなります。

0
Code83

insertAdjacentHTML（）を使用する方法です。詳細： ドキュメントをクリックしてください

0
Heals Legodi