有没有办法转换HTML像:
<div>
<a href="#"></a>
<span></span>
</div>
或任何其他HTML字符串到DOM元素？(这样我就可以使用appendChild())了.我知道我可以做.innerHTML和.innerText,但这不是我想要的 - 我真的希望能够将动态HTML字符串转换为DOM元素,以便我可以在.appendChild()中传递它.
更新:似乎有困惑.我有一个字符串中的HTML内容,作为JavaScript中变量的值.文档中没有HTML内容.
那么这是用reactjs渲染原始html的唯一方法吗？
// http://facebook.github.io/react/docs/tutorial.html
// tutorial7.js
var converter = new Showdown.converter();
var Comment = React.createClass({
render: function() {
var rawMarkup = converter.makeHtml(this.props.children.toString());
return (
<div className="comment">
<h2 className="commentAuthor">
{this.props.author}
</h2>
<span dangerouslySetInnerHTML={{__html: rawMarkup}} />
</div>
);
}
});
我知道有一些很酷的方法来标记JSX的东西,但我主要感兴趣的是能够渲染原始的html(包括所有类,内联样式等).像这样复杂的东西:
<!-- http://getbootstrap.com/components/#dropdowns-example -->
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
<li role="presentation"><a role="menuitem" …我将在javascript中创建一个xml元素来与服务器端交换数据.我发现我可以用document.createElement.But来做它我不知道如何将它转换为字符串.浏览器中是否有API使其更容易？或者是否有任何js lib包含这个API？
提前致谢.
//修改
我发现浏览器API XMLSerializer,它应该是序列化为字符串的正确方法.
我可以将字符串转换为html对象吗？喜欢:
string s = '<div id="myDiv"></div>';
var htmlObject = s.toHtmlObject;
所以我以后可以通过id获取它并做一些改变它的风格
var ho = document.getElementById("myDiv").style.marginTop = something;
丽娜,提前100万
说有一个,
var some_html = '<div class = "am_hold">' +
'<img name="bo_im" id="' + val.id + '" class="bookmark_image" src="' + val.favicon + '">' +
'<a target="_blank" name="bookmark_link" class="bookmark_link" href = "' +
val.url + '" id="' + val.id + '">' + val.title + '</a>' +
'<div><div class = "bookmark_menu"></div></div>' +
'</div>';
是可以做到的
var some_element = `some_function`(some_html);
是否有some_function(1)的实现没有使用库和(2)使用库.
有没有一种方法可以使用普通的旧香草javascript(无框架)将html模板字符串转换为Html元素？
这就是我尝试过的事情:
function renderBody(selector = body, template) {
const prop.text = 'foobar';
const templateString = `<div id='test'>${prop.text}</div>`
const test = document.createElement('div');
test.innerHTML = templateString;
document.querySelector(selector).appendChild(test);
}
这个实现工作,但它使用innerHTML并添加一个额外的包装div.有没有额外的方法可以做到这一点div？
也许这是非常基本的,但我都很困惑.我有一个简单的html页面,包含许多部分(div).我在javascript中有一个包含html标签的字符串.代码如下:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
var str1="<html><body><div id='item1'><h2>This is a heading1</h2><p>This is a paragraph1.</p></div><div id='item2'><h2>This is a heading2</h2><p>This is another paragraph.</p></div><div id='lastdiv'>last</div></body></html>";
</script>
</head>
<body>
<div id="title1"></div>
<div id="new1"></div>
<div id="title2"></div>
<div id="new2"></div>
</body>
</html>
我想提取html标签的内容(来自javascript中的字符串),并在我的html页面中显示所需部分中的内容.
即我想在"这是一个段落1"中显示"这是一个标题1" <div id="title1">.显示在<div id="new1">第二对标签中并与之相同.
我需要所有这些只在客户端工作.我试图使用HTML DOM getElementByTagName方法,它变得太复杂了.我对jquery知之甚少.我很困惑.我不明白该怎么做.你能指导我使用什么--javascript或jquery以及如何使用它？有没有办法从字符串中识别并迭代它？
如何从str1中提取"This is heading1"(和html标签中包含的类似内容)？我不知道这些索引因此无法在javascript中使用substr()或substring()函数.
var NewRow = document.createElement("<tr><td align='left' valign='top' width='9%;' ><img width='32px' height='32px' src='images/" + ProfilePic + "' /></td><td align='left' valign='Top' ><span class='MsgSpan'>" + Msg + "</span></td><td align='right' align='left' valign='top' style='color:Gray;' >" + Date + "</td></tr>");
我收到一个错误:
InvalidCharacterError: String contains an invalid character
我怎样才能解决这个问题？
我想通过javasacript从字符串创建HTMLElement,就像这样
element = createHTMLElement('<table class="list"><tr><td><a href="xxx">title</a></td></tr></table>')
element.addEventListener(...)
parent.appendChild(element)
我不想使用jQuery
我需要使用纯javaScript将一些html附加到现有元素:
function create(htmlStr) {
var frag = document.createDocumentFragment(),
temp = document.createElement('div');
temp.innerHTML = htmlStr;
while (temp.firstChild) {
frag.appendChild(temp.firstChild);
}
return frag;
}
var target = document.querySelectorAll(".container-right");
var fragment = create(
'<div class="freetext"><p>Some text that should be appended...</p></div>'
);
document.body.insertBefore(fragment, document.body.childNodes[0]);
它有点工作,但我有两个问题:
如何确保将html片段附加到具有类的div container-right而不仅仅是正文？将最后一行更改为document.body.insertBefore(fragment, target);不起作用.
如何在目标元素中的内容之后插入html - 在现有内容之后 - 如jQuery的append()？
任何帮助深表感谢.