javascript - 将 html 更改为 var

Question

作为标题，我有：

var contentString ='< h3 id="demo">< /h3>;

我想更改“演示”的内容，但不知道该怎么做。
任何好的建议将不胜感激。

Answer 1

我认为您应该考虑创建一个节点而不是创建一个“字符串节点”。就像这样：

var node = document.createElement('h3');
node.id = 'demo'
node.innerHTML = 'hello';
document.getElementsByTagName('body')[0].appendChild(node);

小提琴：http: //jsfiddle.net/RYHWc/

Answer 2

您的 html 无效，“<”和“h3”之间不应有空格。

var contentString ='<h3 id="demo"> text </h3>';

在此之后更改 html 的属性是标准的。我在 jQuery 中是这样完成的：

var contentString ='<h3 id="demo"> text </h3>';
contentString = $(contentString).attr('id', "mynewid");

小提琴：http: //jsfiddle.net/Pee3n/

Answer 3

有很多方法可以从字符串向 Javascript 中的元素添加内容。

一个简单的方法是放置一个可以稍后替换的令牌：

var contentString ='<h3 id="demo">__CONTENT__</h3>';
var newContent = 'foo';
contentString = contentString.replace('__CONTENT__', newContent);

或者您可以将代码分成多个变量并将它们连接起来：

var contentString1 = '<h3 id="demo">';
var contentString2 = '</h3>';
var newContent = 'foo';
var contentString = contentString1 + newContent + contentString2;

您还可以使用 JQuery，创建 DOM 元素并添加内容：

var contentString ='<h3 id="demo"></h3>';
var $el = $(contentString);
var newContent = 'foo';
$el.html(newContent);

考虑 contentString 中的多个标签，您可以执行以下操作：

var contentString ='<h1>...</h1><h3 id="demo"></h3>';
var newContent = 'foo';

//Create a div wrapper
var $wrapper = $('<div>');

//Add all the content
$wrapper.html(contentString);

//get the element with id "demo"
var $el = $wrapper.find("#demo");

//add content to that element
$el.html(newContent);

//get a string once again with the new content
contentString = $wrapper.html();

Answer 4

你可以这样定义一个函数：

function changeAttrValue(str,attrName,oldAttrVal,newAttrVal){
    return str.replace(new RegExp(attrName+'="'+oldAttrVal+'"'),attrName+'="'+newAttrVal+'"');
}

changeAttrValue('< h3 id="demo">< /h3>','id','demo','otherId'); // -> '< h3 id="otherId">< /h3>'
changeAttrValue('< h3 class="head">< /h3>','class','head','otherClass'); // -> '< h3 class="otherClass">< /h3>'

我实际上不是这个符号的朋友：

new RegExp

我建议你总是使用这样的文字：

/\w+/, /\d{1,2}/

但是对于函数 changeAttrValue 我找不到更好的解决方案，抱歉......不过

ps 为了使函数起作用，不要写：

id='demo'

写：

id="demo"

我希望这对您有所帮助，并且您想以这种方式完成它。