我需要动态设置DIV元素内的文本。什么是最好的浏览器安全方法?我有可用的prototypejs和scriptaculous。
<div id="panel">
<div id="field_name">TEXT GOES HERE</div>
</div>
该函数将如下所示:
function showPanel(fieldName) {
var fieldNameElement = document.getElementById('field_name');
//Make replacement here
}
我将使用update
支持纯文本,HTML代码段或定义toString
方法的任何JavaScript对象的Prototype方法。
$("field_name").update("New text");
您可以简单地使用:
fieldNameElement.innerHTML = "My new text!";
在2013年及以后为阅读此文章的所有人更新:
这个答案有很多SEO,但是所有答案都严重过时了,要依靠库来完成当前所有浏览器都可以做的事情。
要替换div元素内的文本,请使用当前所有浏览器中提供的Node.textContent。
fieldNameElement.textContent = "New 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));
}
这样做的好处:
- 它仅使用DOM,因此该技术可移植到其他语言,并且不依赖于非标准的innerHTML
- fieldName可能包含HTML,这可能是XSS尝试攻击。如果我们知道它只是文本,则应该创建一个文本节点,而不是让浏览器将其解析为HTML。
如果要使用javascript库,请使用jQuery,并执行以下操作:
$("div#field_name").text(fieldName);
请注意,@ AnthonyWJones的注释是正确的:“ field_name”不是特别描述性的ID或变量名。
$('field_name').innerHTML = 'Your text.';
原型的漂亮功能之一是与原型$('field_name')
相同document.getElementById('field_name')
。用它!:-)
John Topley使用Prototypeupdate
函数的答案是另一个很好的解决方案。
快速的答案是使用innerHTML(或几乎相同的原型的更新方法)。innerHTML的问题是您需要转义要分配的内容。根据您的目标,您将需要使用其他代码来执行此操作,或者
在IE中:
document.getElementById("field_name").innerText = newText;
在FF中:
document.getElementById("field_name").textContent = newText;
(实际上FF的代码中包含以下内容)
HTMLElement.prototype.__defineGetter__("innerText", function () { return this.textContent; })
HTMLElement.prototype.__defineSetter__("innerText", function (inputText) { this.textContent = inputText; })
现在,如果您需要尽可能广泛的浏览器支持,则可以仅使用innerText,但这不是一个完整的解决方案,但也没有在原始文件中使用innerHTML。
如果您真的希望我们从您上次中断的地方继续,则可以执行以下操作:
if (fieldNameElement)
fieldNameElement.innerHTML = 'some HTML';
nodeValue也是您可以使用的标准DOM属性:
function showPanel(fieldName) {
var fieldNameElement = document.getElementById(field_name);
if(fieldNameElement.firstChild)
fieldNameElement.firstChild.nodeValue = "New Text";
}
el.innerHTML='';
el.appendChild(document.createTextNode("yo"));
如果您打算在网站上开始使用大量JavaScript,则jQuery使使用DOM变得非常简单。
使其变得简单:$(“#field-name”)。text(“ Some new text。”);
如果您不能假设结构,请使用innerText-使用Text#data更新现有文本
性能测试
function showPanel(fieldName) {
var fieldNameElement = document.getElementById(field_name);
fieldNameElement.removeChild(fieldNameElement.firstChild);
var newText = document.createTextNode("New Text");
fieldNameElement.appendChild(newText);
}
这是一种简单的jQuery方式:
var el = $('#yourid .yourclass');
el.html(el.html().replace(/Old Text/ig, "New Text"));
在HTML中放这个
<div id="field_name">TEXT GOES HERE</div>
用Javascript把这个
var fieldNameElement = document.getElementById('field_name');
if (fieldNameElement)
{fieldNameElement.innerHTML = 'some HTML';}
文章标签:dom , html , javascript
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!
评论已关闭!