blocks|key|1531757|text|您可以简单地使用：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1531758|fieldNameElement.innerHTML+=+"My+new+text!";|code-block|syntax|javascript|1531759|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

You can simply use:

<pre><code>fieldNameElement.innerHTML = "My new text!";
</code></pre>

blocks|key|1531741|text|$('field_name').innerHTML+=+'Your+text.';|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1531742|Prototype的一个很好的特性是$('field_name')和document.getElementById('field_name')做同样的事情。使用它！:-)|unstyled|offset|length|style|CODE|1531743|John+Topley的答案是使用Prototype的update函数是另一个很好的解决方案。|1531744|entityMap^0|0|I|F|Y|11|0|R|6|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|P|8|@$G|Q|H|R|I|J]|$G|S|H|T|I|J]]|9|@]|A|$]]|$1|K|3|L|5|F|7|U|8|@$G|V|H|W|I|J]]|9|@]|A|$]]|$1|M|3|-4|5|F|7|X|8|@]|9|@]|A|$]]]|N|$]]

<pre><code>$('field_name').innerHTML = 'Your text.';
</code></pre>

One of the nifty features of Prototype is that <code>$('field_name')</code> does the same thing as <code>document.getElementById('field_name')</code>. Use it! :-)

John Topley's answer using Prototype's <code>update</code> function is another good solution.

blocks|key|1531858|text|快速的答案是使用innerHTML+(或者prototype的更新方法，这几乎是一样的)。innerHTML的问题是你需要避开被赋值的内容。根据您的目标，您将需要使用其他代码或|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1531859|在IE中：|1531860|document.getElementById("field_name").innerText+=+newText;|code-block|syntax|javascript|1531861|在FF中：-|1531862|document.getElementById("field_name").textContent+=+newText;|1531863|(+FF的实际代码中包含以下内容)|1531864|HTMLElement.prototype.__defineGetter__("innerText",+function+()+{+return+this.textContent;+})

HTMLElement.prototype.__defineSetter__("innerText",+function+(inputText)+{+this.textContent+=+inputText;+})|1531865|现在我可以只使用innerText，如果您需要最广泛的浏览器支持，那么这还不是一个完整的解决方案，在原始版本中使用innerHTML也不是。|1531866|entityMap^0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|W|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|X|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|Y|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|Z|8|@]|9|@]|A|$]]|$1|O|3|P|5|F|7|10|8|@]|9|@]|A|$G|H]]|$1|Q|3|R|5|6|7|11|8|@]|9|@]|A|$]]|$1|S|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|T|$]]

The quick answer is to use innerHTML (or prototype's update method which pretty much the same thing). The problem with innerHTML is you need to escape the content being assigned. Depending on your targets you will need to do that with other code OR

in IE:-

<pre><code>document.getElementById("field_name").innerText = newText;
</code></pre>

in FF:-

<pre><code>document.getElementById("field_name").textContent = newText;
</code></pre>

(Actually of FF have the following present in by code)

<pre><code>HTMLElement.prototype.__defineGetter__("innerText", function () { return this.textContent; })

HTMLElement.prototype.__defineSetter__("innerText", function (inputText) { this.textContent = inputText; })
</code></pre>

Now I can just use innerText if you need widest possible browser support then this is not a complete solution but neither is using innerHTML in the raw.

blocks|key|1531784|text|如果您真的想让我们从您停止的地方继续，您可以这样做：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1531785|if+(fieldNameElement)
++++fieldNameElement.innerHTML+=+'some+HTML';|code-block|syntax|javascript|1531786|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

If you really want us to just continue where you left off, you could do:

<pre><code>if (fieldNameElement)
 fieldNameElement.innerHTML = 'some HTML';
</code></pre>

blocks|key|1747000|text|nodeValue也是一个标准的DOM属性，您可以使用：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1747001|function+showPanel(fieldName)+{
++var+fieldNameElement+=+document.getElementById(field_name);
++if(fieldNameElement.firstChild)
++++fieldNameElement.firstChild.nodeValue+=+"New+Text";
}|code-block|syntax|javascript|1747002|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

nodeValue is also a standard DOM property you can use:

<pre><code>function showPanel(fieldName) {
 var fieldNameElement = document.getElementById(field_name);
 if(fieldNameElement.firstChild)
 fieldNameElement.firstChild.nodeValue = "New Text";
}
</code></pre>

blocks|key|1532013|text|el.innerHTML='';
el.appendChild(document.createTextNode("yo"));|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1532014|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>el.innerHTML='';
el.appendChild(document.createTextNode("yo"));
</code></pre>

blocks|key|1746924|text|如果您倾向于在站点上开始使用大量的JavaScript，jQuery使使用DOM变得非常简单。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1746925|http://docs.jquery.com/Manipulation|offset|length|1746926|让它变得简单：$(“#field-name”).text(“一些新文本”)；|1746927|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|Z|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@$D|Q|E|R|1|S]]|A|$]]|$1|F|3|G|5|6|7|T|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|U|8|@]|9|@]|A|$]]]|I|$J|$5|K|L|M|A|$N|C]]]]

If you're inclined to start using a lot of JavaScript on your site, jQuery makes playing with the DOM extremely simple.

<a href="http://docs.jquery.com/Manipulation" rel="nofollow noreferrer"><a href="http://docs.jquery.com/Manipulation" rel="nofollow noreferrer">http://docs.jquery.com/Manipulation</a></a>

Makes it as simple as:
$("#field-name").text("Some new text.");

blocks|key|1532044|text|如果不能假定结构，请使用innerText+-使用Text#data更新现有的文本Performance+Test|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1532045|entityMap|0|LINK|mutability|MUTABLE|url|https://twitter.com/_developit/status/997132016612270081^0|15|G|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

Use innerText if you can't assume structure
- Use Text#data to update existing text
<a href="https://twitter.com/_developit/status/997132016612270081" rel="nofollow noreferrer">Performance Test</a>

blocks|key|1531809|text|function+showPanel(fieldName)+{
++var+fieldNameElement+=+document.getElementById(field_name);

++fieldNameElement.removeChild(fieldNameElement.firstChild);
++var+newText+=+document.createTextNode("New+Text");
++fieldNameElement.appendChild(newText);
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1531810|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>function showPanel(fieldName) {
 var fieldNameElement = document.getElementById(field_name);

 fieldNameElement.removeChild(fieldNameElement.firstChild);
 var newText = document.createTextNode("New Text");
 fieldNameElement.appendChild(newText);
}
</code></pre>

blocks|key|1746948|text|这里有一个简单的jQuery方法：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1746949|var+el+=+$('#yourid+.yourclass');

el.html(el.html().replace(/Old+Text/ig,+"New+Text"));|code-block|syntax|javascript|1746950|entityMap|0|LINK|mutability|MUTABLE|url|http://jquery.com/^0|8|6|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

Here's an easy <a href="http://jquery.com/" rel="nofollow noreferrer">jQuery</a> way:

<pre><code>var el = $('#yourid .yourclass');

el.html(el.html().replace(/Old Text/ig, "New Text"));
</code></pre>

blocks|key|1747107|text|在HTML中放入以下内容|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1747108|<div+id="field_name">TEXT+GOES+HERE</div>|code-block|syntax|javascript|1747109|在Javascript中放入以下内容|1747110|var+fieldNameElement+=+document.getElementById('field_name');
++++++++if+(fieldNameElement)
++++++++{fieldNameElement.innerHTML+=+'some+HTML';}|1747111|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

In HTML put this

<pre><code>&lt;div id="field_name"&gt;TEXT GOES HERE&lt;/div&gt;
</code></pre>

In Javascript put this

<pre><code>var fieldNameElement = document.getElementById('field_name');
 if (fieldNameElement)
 {fieldNameElement.innerHTML = 'some HTML';}
</code></pre>

I need to set the text within a DIV element dynamically. What is the best, browser safe approach? I have prototypejs and scriptaculous available.

<pre><code>&lt;div id="panel"&gt;
 &lt;div id="field_name"&gt;TEXT GOES HERE&lt;/div&gt;
&lt;/div&gt;
</code></pre>

Here's what the function will look like:

<pre><code>function showPanel(fieldName) {
 var fieldNameElement = document.getElementById('field_name');
 //Make replacement here
}
</code></pre>

How do I replace text inside a div element?

jQuery

我需要在DIV元素中动态设置文本。最好的浏览器安全方法是什么？我有可用的prototypejs和scriptaculous。<div id="panel"> <div id="field_name">TEXT GOES HERE</div></div>下面是该函数的外观：function showPanel(fieldName) { var fieldNameElement = documen

问如何替换div元素中的文本？
EN

回答 11

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何替换div元素中的文本？EN

回答 11

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何替换div元素中的文本？
EN