3

私は次のような要素を持っています：

 <div id="test">
    <span>You have
    <em>30</em>
    <span> characters left</span>
 </div>

そして私はそれを次のいずれかに置き換えたいと思います：

 <div id="test">
    <span>You reached the maximum length</span>
 </div>

またはと

 <div id="test">
    <span>Your text is </span>
    <em>30</em>
    <span> characters to long</span>
 </div>

すべての子要素を新しい要素のセットに置き換える方法はありますか？現時点では、最初にすべての要素を削除するために次の関数を使用しています。

function emptyElement(id) {
    while(document.getElementById(id).hasChildNodes()) {
        document.getElementById(id).removeChild(document.getElementById(id).firstChild)
    }
}

その後、コンテンツを再度追加します。

span1 = document.createElement("span");
span1.appendChild(document.createTextNode("You have "));

len = document.createElement("em");
len.appendChild(document.createTextNode(length));

span2 = document.createElement("span");
span2.appendChild(document.createTextNode(" characters left."));

// remove child elements
emptyElement('test');

// Add content
document.getElementById('test').appendChild(span1);
document.getElementById('test').appendChild(len);
document.getElementById('test').appendChild(span2);

（1）子要素を削除し、（2）コンテンツを生成し、（3）新しい要素をdivに追加するためのより簡単な方法があるかもしれないという印象を持っています。

4

4 に答える 4

4
  1. を使用することで、より簡単に削除できますelement.innerHTML = '';
  2. コンテンツの生成は、を使用してコンテンツを追加するか.innerHTML、要素のコレクションをキャッシュすることで、より簡単に行うこともできます。

    また
  3. elem.parentNode.replaceChild(new_elem, elem);#test要素上で最も簡単な方法になります。

キャッシュされたDOM要素の使用

デモ： http： //jsfiddle.net/aKASN/1/

HTML：

<input type="text" id="input">
<div id="test"></div>

JavaScript：

window.onload = function() {
    // References
    var limit_reached = document.createElement('div');
    limit_reached.id = 'test';
    limit_reached.innerHTML = 'You reached the maximum length';

    var chars_left = document.createElement('div');
    chars_left.id = 'test';
    chars_left.innerHTML = 'You have <em id="number_of_chars">30</em> characters left';

    document.getElementById('input').onkeyup = function() {
        var char_count = this.value.length;
        var limit = 20;
        var test = document.getElementById('test');

        if ( char_count > limit ) {
            test.parentNode.replaceChild(limit_reached, test);
        } else {
            chars_left.getElementsByTagName('em')[0].innerHTML = limit - char_count;
            test.parentNode.replaceChild(chars_left, test);
        }
    };
};

非表示の要素を使用する（推奨）

以前の方法よりもお勧めするもう1つの方法は、CSSを使用して、にすべての要素を含め、未使用のメッセージを非表示にすることです。要素を何度も作成する必要がないため、これはDOM操作よりも効率的です。

デモ： http： //jsfiddle.net/aKASN/

CSS：

.hidden {display:none;}

HTML：

<input type="text" id="input">
<div><!-- Original id="test" -->
   <span id="charsleft" class="hidden">
      You have
      <em id="number_of_chars">30</em>
      characters left
   </span>
   <span id="limit_reached" class="hidden">
       You reached the maximum length
   </span>
</div>

JavaScript：

window.onload = function() {
    // References
    var chars_left = document.getElementById('charsleft');
    var number_of_chars = document.getElementById('number_of_chars');
    var limit_reached = document.getElementById('limit_reached');
    var input = document.getElementById('input');

    input.onkeyup = function() {
        // Example value:
        var char_count = input.value.length;

        // Example: 20 character limit
        if ( char_count > 20 ) {
            chars_left.className = 'hidden';
            limit_reached.className = '';
        } else {
            chars_left.className = '';
            number_of_chars.innerHTML = 20 - char_count;
            limit_reached.className = 'hidden';
        }
    };
};
于 2012-04-13T09:17:43.220 に答える
0

これは簡単ですが、醜いです：

function emptyElement(id) {
    document.getElementById(id).innerHTML = '';
}
function newContent(id, newHTML) {
    document.getElementById(id).innerHTML = newHTML;
}

利用方法：

newContent('test', '<span>You have </span><em>' + length + '</em><span> characters left.</span>');
于 2012-04-13T09:17:36.513 に答える
0

試す

document.getElementById(id).innerHTML = 'new html';
于 2012-04-13T09:18:16.517 に答える
-1

コンテンツがあまりユーザーでない場合.innerHTML

 <div id="test">
    <span>You have
    <em>30</em>
    <span> characters left</span>
 </div>

に置き換えることができます

<div id="test">
    <span>You reached the maximum length</span>
 </div>

を使用して

document.getElementById('test').innerHTML = '<span>You reached the maximum length</span>';
于 2012-04-13T09:19:33.447 に答える