如何替换div元素内的文本?

2020/10/24 18:01 · javascript ·  · 0评论

我需要动态设置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));
}

这样做的好处:

  1. 它仅使用DOM,因此该技术可移植到其他语言,并且不依赖于非标准的innerHTML
  2. 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变得非常简单。

http://docs.jquery.com/操作

使其变得简单:$(“#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';}
本文地址:http://javascript.askforanswer.com/ruhetihuandivyuansuneidewenben.html
文章标签: ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!