blocks|key|3030273|text|我会使用Prototype的update方法，它支持纯文本、HTML代码片段或任何定义toString方法的JavaScript对象。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3030274|$("field_name").update("New+text");|code-block|syntax|javascript|3030275|3030276|Element.update+documentation|unordered-list-item|3030277|3030278|entityMap|0|LINK|mutability|MUTABLE|url|http://www.prototypejs.org/api/element/update^0|E|6|17|8|0|0|0|0|S|0|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@$9|Y|A|Z|B|C]|$9|10|A|11|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|12|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|13|8|@]|D|@]|E|$]]|$1|L|3|M|5|N|7|14|8|@]|D|@$9|15|A|16|1|17]]|E|$]]|$1|O|3|-4|5|6|7|18|8|@]|D|@]|E|$]]|$1|P|3|-4|5|6|7|19|8|@]|D|@]|E|$]]]|Q|$R|$5|S|T|U|E|$V|W]]]]

I would use Prototype's <code>update</code> method which supports plain text, an HTML snippet or any JavaScript object that defines a <code>toString</code> method.

<pre><code>$("field_name").update("New text");
</code></pre>

<ul>
<li><a href="http://www.prototypejs.org/api/element/update" rel="noreferrer">Element.update documentation</a></li>
</ul>

blocks|key|770931|text|您可以简单地使用：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|770932|fieldNameElement.innerHTML+=+"My+new+text!";|code-block|syntax|javascript|770933|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|3030640|text|为2013年及以后阅读本文的所有人更新的：|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|3030641|这个答案有很多SEO，但是所有的答案都严重过时了，并且依赖于库来做当前所有浏览器开箱即用的事情。|3030642|To+replace+text+inside+a+div+element,+use+Node.textContent,+which+is+provided+in+all+current+browsers.|3030643|fieldNameElement.textContent+=+"New+text";|code-block|syntax|javascript|3030644|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/API/Node.textContent#Browser_compatibility^0|K|1|0|0|0|2U|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Z|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|10|8|@]|D|@$9|11|A|12|1|13]]|E|$]]|$1|J|3|K|5|L|7|14|8|@]|D|@]|E|$M|N]]|$1|O|3|-4|5|6|7|15|8|@]|D|@]|E|$]]]|P|$Q|$5|R|S|T|E|$U|V]]]]

Updated for everyone reading this in 2013 and later:

This answer has a lot of SEO, but all the answers are severely out of date and depend on libraries to do things that all current browsers do out of the box.

<a href="https://developer.mozilla.org/en-US/docs/Web/API/Node.textContent#Browser_compatibility" rel="noreferrer">To replace text inside a div element, use Node.textContent, which is provided in all current browsers.</a>

<pre><code>fieldNameElement.textContent = "New text";
</code></pre>

blocks|key|3030403|text|function+showPanel(fieldName)+{
++var+fieldNameElement+=+document.getElementById("field_name");
++while(fieldNameElement.childNodes.length+>=+1)+{
++++fieldNameElement.removeChild(fieldNameElement.firstChild);
++}
++fieldNameElement.appendChild(fieldNameElement.ownerDocument.createTextNode(fieldName));
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|3030404|这样做的好处是：|unstyled|3030405|XSS只使用DOM，因此该技术可以移植到其他语言，并且不依赖于可能包含的非标准|3030406|，这可能是企图的XSS攻击。如果我们知道它只是文本，我们应该创建一个文本节点，而不是让浏览器为HTML|ordered-list-item|3030407|解析它|3030408|如果我要使用javascript库，我会使用jQuery，并这样做：|3030409|++$("div#field_name").text(fieldName);|3030410|注意，@AnthonyWJones'+comment是正确的："field_name“不是一个特别具有描述性的id或变量名。|offset|length|3030411|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/121817/replace-text-inside-a-div-element#comment27322_121898^0|0|0|0|0|0|0|0|3|N|0|0^^$0|@$1|2|3|4|5|6|7|13|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|14|8|@]|9|@]|A|$]]|$1|G|3|H|5|F|7|15|8|@]|9|@]|A|$]]|$1|I|3|J|5|K|7|16|8|@]|9|@]|A|$]]|$1|L|3|M|5|F|7|17|8|@]|9|@]|A|$]]|$1|N|3|O|5|F|7|18|8|@]|9|@]|A|$]]|$1|P|3|Q|5|6|7|19|8|@]|9|@]|A|$B|C]]|$1|R|3|S|5|F|7|1A|8|@]|9|@$T|1B|U|1C|1|1D]]|A|$]]|$1|V|3|-4|5|F|7|1E|8|@]|9|@]|A|$]]]|W|$X|$5|Y|Z|10|A|$11|12]]]]

<pre><code>
function showPanel(fieldName) {
 var fieldNameElement = document.getElementById("field_name");
 while(fieldNameElement.childNodes.length >= 1) {
 fieldNameElement.removeChild(fieldNameElement.firstChild);
 }
 fieldNameElement.appendChild(fieldNameElement.ownerDocument.createTextNode(fieldName));
}
</code></pre>

The advantages of doing it this way:

<ol>
<li>It only uses the DOM, so the technique is portable to other languages, and doesn't rely on the non-standard innerHTML</li>
<li>fieldName might contain HTML, which could be an attempted XSS attack. If we know it's just text, we should be creating a text node, instead of having the browser parse it for HTML</li>
</ol>

If I were going to use a javascript library, I'd use jQuery, and do this:

<pre><code>
 $("div#field_name").text(fieldName);
</code></pre>

Note that <a href="https://stackoverflow.com/questions/121817/replace-text-inside-a-div-element#comment27322_121898">@AnthonyWJones' comment</a> is correct: "field_name" isn't a particularly descriptive id or variable name.

blocks|key|770926|text|$('field_name').innerHTML+=+'Your+text.';|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|770927|Prototype的一个很好的特性是$('field_name')和document.getElementById('field_name')做同样的事情。使用它！:-)|unstyled|offset|length|style|CODE|770928|John+Topley的答案是使用Prototype的update函数是另一个很好的解决方案。|770929|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|768299|text|快速的答案是使用innerHTML+(或者prototype的更新方法，这几乎是一样的)。innerHTML的问题是你需要避开被赋值的内容。根据您的目标，您将需要使用其他代码或|type|unstyled|depth|inlineStyleRanges|entityRanges|data|768300|在IE中：|768301|document.getElementById("field_name").innerText+=+newText;|code-block|syntax|javascript|768302|在FF中：-|768303|document.getElementById("field_name").textContent+=+newText;|768304|(+FF的实际代码中包含以下内容)|768305|HTMLElement.prototype.__defineGetter__("innerText",+function+()+{+return+this.textContent;+})

HTMLElement.prototype.__defineSetter__("innerText",+function+(inputText)+{+this.textContent+=+inputText;+})|768306|现在我可以只使用innerText，如果您需要最广泛的浏览器支持，那么这还不是一个完整的解决方案，在原始版本中使用innerHTML也不是。|768307|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|3875229|text|如果您真的想让我们从您停止的地方继续，您可以这样做：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3875230|if+(fieldNameElement)
++++fieldNameElement.innerHTML+=+'some+HTML';|code-block|syntax|javascript|3875231|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|5286453|text|nodeValue也是一个标准的DOM属性，您可以使用：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5286454|function+showPanel(fieldName)+{
++var+fieldNameElement+=+document.getElementById(field_name);
++if(fieldNameElement.firstChild)
++++fieldNameElement.firstChild.nodeValue+=+"New+Text";
}|code-block|syntax|javascript|5286455|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|3875504|text|el.innerHTML='';
el.appendChild(document.createTextNode("yo"));|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|3875505|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|3030508|text|如果您倾向于在站点上开始使用大量的JavaScript，jQuery使使用DOM变得非常简单。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3030509|http://docs.jquery.com/Manipulation|offset|length|3030510|让它变得简单：$(“#field-name”).text(“一些新文本”)；|3030511|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|5286596|text|如果不能假定结构，请使用innerText+-使用Text#data更新现有的文本Performance+Test|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|5286597|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|3030291|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|3030292|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|3875445|text|这里有一个简单的jQuery方法：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|3875446|var+el+=+$('#yourid+.yourclass');

el.html(el.html().replace(/Old+Text/ig,+"New+Text"));|code-block|syntax|javascript|3875447|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|3030728|text|在HTML中放入以下内容|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3030729|<div+id="field_name">TEXT+GOES+HERE</div>|code-block|syntax|javascript|3030730|在Javascript中放入以下内容|3030731|var+fieldNameElement+=+document.getElementById('field_name');
++++++++if+(fieldNameElement)
++++++++{fieldNameElement.innerHTML+=+'some+HTML';}|3030732|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?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

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

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

回答 14

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 14

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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