We Keep Coding

generate HTML from a set of jQuery objects?

I am trying to modify an HTML string (things like adding class to one of its children). In my code I have to used a container as a midway to ouput $html as a string. Does jQuery provide any function to do this?
html = "<p>title</p><div><ul class='www'></ul>something</div>";
$html = $(html);
$html.filter('div').find('ul').addClass('xxx');
container = $('<div></div>');
html = container.html($html)[0].innerHTML; //output "<p>title</p><div><ul class='www xxx'></ul>something</div>"

Nope.
There is no escape to interacting with the DOM (this is creating or selecting an existing element), the best you can try is to document.write your string but you'll need to scape the HTML so it doesn't gets interpreted as HTML but text. Notice that document.write only works before the document finishes loading.
I don't know your needs but I can't think of a good use case for this, your jQuery should be better for most cases.

Replacing HTML text with javascript

I am trying to replace some html text from some code with some new text using javascript and I have learned about Javascript HTML DOM which I believe is the way to do this; however, whenever write a method, nothing seems to change.
This is a line I am interested in changing. I want to change "Text here" to "Hello World!".
Text here
This the code I used
<script> document.getElementById("login_or_create_user_modal").innerHTML = "Hello World!"; </script>
My first concern is I have noticed that it is a data-reveal-id which is not the same as the usual id, is there a better method to use in this case? I couldn't find anything relating to data-reveal-id.
The other thing I am trying to change is to change the text cart to "Hello World!'. Again, the method I used does not do anything.
<script> document.getElementById("shopping_cart_btn").innerHTML = "Hello World!"; </script>
Am I using the right ID or am I just completely in the wrong path here?
Thanks :)

for document.getElementById() to work, you need an id attribute set, try:
Text here

change your "data-reveal-id" to just "id" and it should work

You're on the wrong path but you were heading the right direction. You just need to hop tracks and climb onto the document.querySelector() train, leaving document.getElementById behind for now.
getElementById will return an element whose id attribute equals the provided value; it won't look at any other attributes, like data-reveal-id.
querySelector instead uses CSS selectors to select an element. For examples of CSS selectors, refer the W3C documentation here: http://www.w3.org/TR/selectors/#selectors
You would use this like so:
document.querySelector("[data-reveal-id='shopping_cart_btn']").innerHTML = "Hello World!";
document.querySelector("[data-reveal-id='shopping_cart_btn']") is saying "get me the first element you can find whose data-reveal-id attribute is equal to shopping_cart_btn.
Here's a working example to prove I'm not crazy. When the JavaScript runs, it selects the div by its data-reveal-id attribute, then replaces its inner HTML:
document.querySelector("[data-reveal-id='something_random']").innerHTML = "New Text";
<div data-reveal-id="something_random">Original Text</div>

What's the use of textContent/innerText when innerHTML does the job better?

This might be a newbie question for most of you but it was explained to me that innerText ONLY gets the element's text and it can't be modified using any HTML tags, while innerHTML does the same job and HTML can as well be used. So, what's the point in having all of them?

Advantages of textContent over innerHTML:
It works on all nodes, not only elements.
var node = document.createTextNode('hello');
node.innerHTML; // undefined
node.textContent; // 'hello'
It gets the text contents of an element, without having to strip HTML tags manually.
var el = document.createElement('div');
el.innerHTML = 'A<p>B<span>C</span>D</p>D';
el.textContent; // "ABCDD" (HTML tags stripped successfully)
It sets the contents of an element to a bunch of plain text, without having to HTML-escape it.
var el = document.createElement('div');
el.textContent = 'A<p>B<span>C</span>D</p>D';
el.children.length; // 0 (plain text HTML-escaped successfully)
Sure, when you use them on elements, innerHTML can be more powerful. But when you only care about the text content but not HTML content, textContent is simpler and likely to have better performance.
So we have both of them, and choose the most appropriate for each case.

If you have an element that's just supposed to contain text, without any HTML formatting, you can assign to .textContent and not have to worry about the string possibly containing characters that look like HTML. For instance, suppose you have an input field, and the user enters something into it, which you then put into a DIV. The user isn't supposed to be able to enter HTML in the input field, so you want to copy it literally. So you write:
div.textContent = input.value;
If you wanted to do this with .innerHTML, you would have to write something like:
div.textContent = input.value.replace(/</g, '<').replace(/&/g, '&');
to prevent HTML from being interpreted.
When reading from an element, you can use .textContent if you just want to get the plain text of it, and ignore any formatting. E.g. if you have
<div id="x">This is <strong>important</strong> stuff</div>
you would use document.getElementById("x").textContent to get just "This is important stuff", and not have to remove the <strong> tag yourself.
BTW, don't use innerText, it's nonstandard and not supported in FireFox.

Sadly, textContent does not work in IE 11. So far, innerHTML is pretty much the only one that consistently works on all browsers (I've tested my sites using it on 15+ versions of Firefox, several versions of IE (using virtualized Windows) and 20+ other browsers (including ones no one else has heard of). It works on every platform I've tried: Windows, Linux, OS X, Android, iOS.
I understand the potential security issues. This is why you always verify inputs into a form before posting them (and check them again if they are passed to another page for processing).

nodeValue vs innerHTML and textContent. How to choose? [duplicate]

This question already has answers here:
innerText vs innerHTML vs label vs text vs textContent vs outerText
(6 answers)
Closed 1 year ago.
I'm using plain js to alter the inner text of a label element, and I wasn't sure on what grounds I should use innerHTML or nodeValue or textContent. I don't need to create a new node or change the HTML elements or anything — just replace the text. Here's an example of the code:
var myLabel = document.getElementById("#someLabel");
myLabel.innerHTML = "Some new label text!"; // this works
myLabel.firstChild.nodeValue = "Some new label text!"; // this also works.
myLabel.textContent = "Some new label text!"; // this also works.
I looked through the jQuery source, and it uses nodeValue exactly one time but innerHTML and textContent several times. Then I found this jsperf test that indicates the firstChild.nodeValue is significantly faster. At least that's what I interpret it to mean.
If firstChild.nodeValue is so much faster, what's the catch? Is it not widely supported? Is there some other issue?

Differences between textContent/innerText/innerHTML on MDN.
And a Stackoverflow answer about innerText/nodeValue.
Summary
innerHTML parses content as HTML, so it takes longer.
nodeValue uses straight text, does not parse HTML, and is faster.
textContent uses straight text, does not parse HTML, and is faster.
innerText Takes styles into consideration. It won't get hidden text for instance.
innerText didn't exist in firefox until FireFox 45 according to caniuse but is now supported in all major browsers.

.textContent outputs text/plain while .innerHTML outputs text/html.
Quick example:
var example = document.getElementById('exampleId');
example.textContent = 'google';
output: google
example.innerHTML = 'google';
output: google
You can see from the first example that output of type text/plain is not parsed by the browser and results in the full content displaying. Output of the type text/html tells the browser to parse it before displaying it.
MDN innerHTML, MDN textContent, MDN nodeValue

The two I know well and work with are innerHTML and textContent.
I use textContent when I just want to change the text of a paragraph or heading like so:
var heading = document.getElementById('heading')
var paragraph = document.getElementById('paragraph')
setTimeout(function () {
heading.textContent = 'My New Title!'
paragraph.textContent = 'My second <em>six word</em> story.'
}, 2000)
em { font-style: italic; }
<h1 id="heading">My Title</h1>
<p id="paragraph">My six word story right here.</p>
So, textContent just changes the text, but it doesn't parse HTML, as we can tell from the tags visible in plain text in the result there.
If we want to parse HTML, we use innerHTML like this:
var heading = document.getElementById('heading')
var paragraph = document.getElementById('paragraph')
setTimeout(function () {
heading.innerHTML = 'My <em>New</em> Title!'
paragraph.innerHTML = 'My second <em>six word</em> story.'
}, 2000)
em { font-style: italic; }
<h1 id="heading">My Title</h1>
<p id="paragraph">My six word story right here.</p>
So, that second example parses the string I assign to the DOM element's innerHTML property as HTML.
This is awesome, and a big security vulnerability : )
(look up XSS if you want to know about security for this)

innerText is roughly what you would get if you selected the text and copied it. Elements that are not rendered are not present in innerText.
textContent is a concatenation of the values of all TextNodes in the sub-tree. Whether rendered or not.
Here is a great post detailing the differences
innerHTML should not be included in a comparison with innerText or textContent, as it is totally different, and you should really know why:-) Look it up separately

[Note: this post is more about sharing a specific data that might help someone than telling people what to do]
In case someone is wondering what's the fastest today:
https://jsperf.com/set-innertext-vs-innerhtml-vs-textcontent
& https://jsperf.com/get-innertext-vs-innerhtml-vs-textcontent (for the second test, the span's content is plain text, results might change according to its content)
It seems that .innerHtml is the great winner in terms of pure speed!
(NOTE: I'm only talking about speed here, you might want to look for others criteria before choosing which one to use!)

Element.innerHTML property to set, or get element's HTML code.
Ex: We have a <h1> tag and strong style with it:
<h1 id="myHeader" style="color: green"><strong>My Header</strong> Normal Text</h1>
To get content of the element has id equals to "myHeader", we will do the same:
var element = document.getElementById("myHeader");
element.innerHTML
Return result:
<strong>My Header</strong> Normal Text`
To "set" new content (value) for this element, the code will be here:
Element.innerHTML = "My Header My Text";
So this property not only works with plain text, but it is aimed at passing or copying HTML code.
=> We should not use it.
However, many programmers (including myself) use this attribute to insert text into a web page, and this method carries a potential risk:
Wrong operation: inserting each text only sometimes deletes all other HTML code of the inserted element.
For security: Of course, the two examples above are completely harmless, even if using the tag is still no problem because the HTML5 standard has prevented the execution of the command line inside the tag. when inserted into the web page via the innerHTML attribute. See this rule here.
Because of this reason, using innerHTML is not recommended when inserting plain text, instead use textContent. The textContent property will not understand that the code you pass is an HTML syntax, but just a 100% text no more and no less.
The result returns if using textContent in the above example:
My Header My Text

document.write to display content on same page.

I have a doubt with javascript document.write method. Mostly when I use document.write() it shows me the content written with the method in a different page. For instance, if I write the command like this, document.write("Hello, My name is Sameeksha"); then the execution of this line takes me to a different document on the same page. I want to be able to append the message on the same page, with other elements of the page. For example, if I have text boxes and buttons on the page and I want the text with document.write to appear under all the content of the page or on a particular section of a page. Please suggest what can be done to get the output in this way? As, this way it will be really easy to create dynamic HTML content.
Thank you so much for your time.
Regards,
Sameeksha Kumari

document.write is basically never used in modern Javascript.
Whan you do instead is to create explicit DOM elements and append them to the document in the place you want. For example
var x = document.createElement("div"); // Creates a new <div> node
x.textContent = "Hello, world"; // Sets the text content
document.body.appendChild(x); // Adds to the document
Instead of appending to the end you can also add child nodes to any existing node. For example:
function addChatMessage(msg) {
var chat = document.getElementById("chat"); // finds the container
var x = document.createElement("div");
x.textContent = msg;
chat.appendChild(x);
}

I'd say 6502 posted the more correct way to do it, but I think someone should mention innerHTML as well. First, give some element in your HTML body an id so you can reference it:
<div id="outputDiv">I'm empty.</div>
Then, either at the bottom of your document (at the end of the <body> tag), or any other time after the page is loaded, you can update the contents with innerHTML:
document.getElementById("outputDiv").innerHTML = "<h1>Hello!!!</h1>";
Here's a jsfiddle demonstrating this. This isn't as clean/correct/elegant as using the more standard DOM methods, but it's well supported. Sometimes quick and dirty is what you need!