Is there a way to convert HTML like:
<div>
<span></span>
</div>
or any other HTML string into DOM element? (So that I could use appendChild()). I know that I can do .innerHTML and .innerText, but that is not what I want -- I literally want to be capable of converting a dynamic HTML string into a DOM element so that I could pass it in a .appendChild().
Update: There seems to be confusion. I have the HTML contents in a string, as a value of a variable in JavaScript. There is no HTML content in the document.
You can use a DOMParser, like so:
var xmlString = "<div id='foo'><a href='#'>Link</a><span></span></div>";
var doc = new DOMParser().parseFromString(xmlString, "text/xml");
console.log(doc.firstChild.innerHTML); // => <a href="#">Link...
console.log(doc.firstChild.firstChild.innerHTML); // => Link
You typically create a temporary parent element to which you can write the innerHTML, then extract the contents:
var wrapper= document.createElement('div');
wrapper.innerHTML= '<div><span></span></div>';
var div= wrapper.firstChild;
If the element whose outer-HTML you've got is a simple <div> as here, this is easy. If it might be something else that can't go just anywhere, you might have more problems. For example if it were a <li>, you'd have to have the parent wrapper be a <ul>.
But IE can't write innerHTML on elements like <tr> so if you had a <td> you'd have to wrap the whole HTML string in <table><tbody><tr>...</tr></tbody></table>, write that to innerHTML and extricate the actual <td> you wanted from a couple of levels down.
Why not use insertAdjacentHTML
for example:
// <div id="one">one</div>
var d1 = document.getElementById('one');
d1.insertAdjacentHTML('afterend', '<div id="two">two</div>');
// At this point, the new structure is:
// <div id="one">one</div><div id="two">two</div>here
Check out John Resig's pure JavaScript HTML parser.
EDIT: if you want the browser to parse the HTML for you, innerHTML is exactly what you want. From this SO question:
var tempDiv = document.createElement('div');
tempDiv.innerHTML = htmlString;
Okay, I realized the answer myself, after I had to think about other people's answers. :P
var htmlContent = ... // a response via AJAX containing HTML
var e = document.createElement('div');
e.setAttribute('style', 'display: none;');
e.innerHTML = htmlContent;
document.body.appendChild(e);
var htmlConvertedIntoDom = e.lastChild.childNodes; // the HTML converted into a DOM element :), now let's remove the
document.body.removeChild(e);
Here is a little code that is useful.
var uiHelper = function () {
var htmls = {};
var getHTML = function (url) {
/// <summary>Returns HTML in a string format</summary>
/// <param name="url" type="string">The url to the file with the HTML</param>
if (!htmls[url])
{
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", url, false);
xmlhttp.send();
htmls[url] = xmlhttp.responseText;
};
return htmls[url];
};
return {
getHTML: getHTML
};
}();
--Convert the HTML string into a DOM Element
String.prototype.toDomElement = function () {
var wrapper = document.createElement('div');
wrapper.innerHTML = this;
var df= document.createDocumentFragment();
return df.addChilds(wrapper.children);
};
--prototype helper
HTMLElement.prototype.addChilds = function (newChilds) {
/// <summary>Add an array of child elements</summary>
/// <param name="newChilds" type="Array">Array of HTMLElements to add to this HTMLElement</param>
/// <returns type="this" />
for (var i = 0; i < newChilds.length; i += 1) { this.appendChild(newChilds[i]); };
return this;
};
--Usage
thatHTML = uiHelper.getHTML('/Scripts/elevation/ui/add/html/add.txt').toDomElement();
Just give an id to the element and process it normally eg:
<div id="dv">
<span></span>
</div>
Now you can do like:
var div = document.getElementById('dv');
div.appendChild(......);
Or with jQuery:
$('#dv').get(0).appendChild(........);
You can do it like this:
String.prototype.toDOM=function(){
var d=document
,i
,a=d.createElement("div")
,b=d.createDocumentFragment();
a.innerHTML=this;
while(i=a.firstChild)b.appendChild(i);
return b;
};
var foo="<img src='//placekitten.com/100/100'>foo<i>bar</i>".toDOM();
document.body.appendChild(foo);
Alternatively, you can also wrap you html while it was getting converted to a string using,
JSON.stringify()
and later when you want to unwrap html from a html string, use
JSON.parse()
I want to extract all the HTML tags like from this <body id = "myid"> .... </body> i just want to extract <body id ="myid"> similarly i want to extract all the HTML tags with attributes and using javascript.
I've tried using regex to make an array of all the tags inclosed between '< & >'
<script>
$(document).ready(function(){
// Get value on button click and show alert
$("#btn_parse").click(function(){
var str = $("#data").val();
var arr = str.split(/[<>]/);
$('#result').text(arr);
});
});
</script>
but it's creating an array arr containing empty and garbage also it's removing angular brackets '<>'
which I don't want.
SO in nutshell I want a script that takes
str ='mystring ... <htmltag id='myid' class='myclass'>i_don't_want_anythin_from_here</htmltag> ...';
and produces an array like:
arr = ["<htmltag id='myid' class='myclass'>","</htmltag>",...];
Here is one dirty way. Add it to the dom so it can be accessed via normal DOM functions, then remove the text, and split the tags and push to an array.
str ="mystring ... <htmltag id='myid' class='myclass'>i_don't_want_anythin_from_here</htmltag> ...";
div = document.createElement("div");
div.innerHTML = str;
document.body.appendChild(div);
tags = div.querySelectorAll("*");
stripped = [];
tags.forEach(function(tag){
tag.innerHTML = "";
_tag = tag.outerHTML.replace("></",">~</");
stripped.push(_tag.split("~"));
});
console.log(stripped);
document.body.removeChild(div);
Assuming you can also get the input from a "live" page then the following should do what you want:
[...document.querySelectorAll("*")]
.map(el=>el.outerHTML.match(/[^>]+>/)[0]+"</"+el.tagName.toLowerCase()+">")
The above will combine the beginning and end tags into one string like
<div class="js-ac-results overflow-y-auto hmx3 d-none"></div>
And here is the same code applied on an arbitrary string:
var mystring="<div class='all'><htmltag id='myid' class='myclass'>i_don't_want_anythin_from_here</htmltag><p>another paragraph</p></div>";
const div=document.createElement("div");
div.innerHTML=mystring;
let res=[...div.querySelectorAll("*")].map(el=>el.outerHTML.match(/[^>]+>/)[0]+"</"+el.tagName.toLowerCase()+">")
console.log(res)
I'm trying to append xmlTwo inside the xmlOne yellow node, but I'm getting an error. What am I doing wrong?
var xmlOne =
$.parseXML(
"<xml xmlns=\"mynamespace\">\
<red>\
<orange>\
<yellow>\
</yellow>\
</orange>\
</red>\
</xml>"
);
var xmlTwo =
$.parseXML(
"<green>\
<blue>I'm in blue!</blue>\
</green>"
);
var xmlThree = xmlOne.getElementsByTagName("yellow")[0].appendChild(xmlTwo);
console.log(xmlThree);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
Parse the first element, the root one.
Keep the second XML element as string.
Find the node in the first element where you want to append the other XML.
Append the XML into the node.
var xmlOne =
$.parseXML(
"<xml xmlns=\"mynamespace\">\
<red>\
<orange>\
<yellow>\
</yellow>\
</orange>\
</red>\
</xml>"
);
var xmlTwoNotParsed =
"<green>\
<blue>I'm in blue!</blue>\
</green>";
var yellowNode = $(xmlOne).find("yellow");
yellowNode.append(xmlTwoNotParsed);
console.log(xmlOne);
I have a xml content as below
<tty>
<xyz id="1">
<yzx>ghs</yzx>
<dfg>kli</dfg>
</xyz>
<xyz id="2">
<yzx>sss</yzx>
<dfg>ddd</dfg>
</xyz>
</tty>
I need to fetch the content of xyz also and when I try to do so I face an error stating
var xmlHttp = new XMLHttpRequest();
xmlHttp.open("GET", "file.xml",false);
xmlHttp.send();
xmlDoc = xmlHttp.responseXML;
var wee= xmlDoc.getElementsByTagName("xyz");
for(var i=0; i<wee.length;i++){
var name = wee[i].childNodes[0].nodeValue;
var yzx = wee[i].childNodes[1].nodeValue;
var dfg= wee[i].childNodes[2].nodeValue;
error is
Cannot read property childnode
My output should have like below
name 1
yzx ghs
you are using getElementsByTagName twice :)
wee is already all of the <xyz> tags, and there are no more <xyz> tags below it. That means the getElementsBbyTagName('xyz') inside the for loop will return nothing.
You probably just want
for(var i = 0; i < wee.length; i++) {
var name = wee[i].childNodes[0].nodeValue; // "yzx" node
}
instead.
I'm using an XMLHttpRequest to retrieve XML from the server, and I'd like to append it to an existing HTML node on the page. It's well formed HTML and I've added xmlns='http://www.w3.org/1999/xhtml' to the XML root element in the response: works fine for Firefox, but IE bombs with "No such interface supported", I guess because it's got the node I'm trying to append typed as "IXMLDOMElement".
Here's the XML response:
<qstat xmlns='http://www.w3.org/1999/xhtml'>
<ul>
<li><b>Cycle number:</b> 6</li>
<li><b>Error:</b> none</li>
</ul>
</qstat>
And here's the Javascript:
var req = new XMLHttpRequest()
req.onreadystatechange = function() {
if(req.readyState == 4)
{
dom = req.responseXML;
var nodes = dom.firstChild.childNodes; //Everything under the root node.
var ele = document.getElementById("qstat");
for(var i=0; i<nodes.length; i++)
{
ele.appendChild(nodes[i]); // BOMBS HERE.
}
}
};
The MSIE Debugger (MSIE 8) correctly identifies nodes[0] as having tagName=ul and even has namespaceURI="http://www.w3.org/1999/xhtml", but I guess because it's type is IXMLDOMElement, the call doesn't work.
So is there any way to convert the objects in nodes to corresponding HTML node objects that I can append to the element?
Try following:
1) create an HTML element
var factory = document.createElement("div");
2) serialize the fetch XML element
var xml = nodes[i].xml || new XMLSerializer().serializeToString(nodes[i]);
3) render xml through innerHTML
factory.innerHTML = xml;
4) get firstChild from factory element which is now HTML element
var eleHTML = factory.firstChild;
5) append eleHTML to where you need it:
ele.appendChild(eleHTML);
Hint: you can reuse once created factory DOMHTML element