We Keep Coding

jquery's version of ".innerHTML +=" for an array html insertion

I have read through some questions pertaining specifically to innerHTML= vs .html(). But yet have crossed anything to add into the variable like innerHTML+= to the html(). Is there a jquery event that can add more than just one html string? Or shall I rely on innerHTML+= for now?
The coding that best describes the current issue:
var pushy = ['blah', 'blaH', 'blaah'];
for(i=0;i<pushy.length;i++){
document.getElementById("demo").innerHTML +=
"<div>Im one heck of a div and more!</div>" + pushy[i];}
vs
$("#demo").html("<div>Im one heck of a div and more!</div>" + pushy[i]);
//where it will return the last array value and not the first value
Although the first is the go to and failsafe. But wanted to see the exact equivalent than just pop the last value of the array. Here is my innerHTML+= vs .html() for example. The question is not pertaining to the innerHTML = but rather the += thereof.

You are probably looking for .append()
$('element').append('SOME HTML');
You example (updated)
https://jsfiddle.net/4pqegj5f/9/

are you looking for
$("#demo").append("<div>Im one heck of a div and more!</div>" + pushy[i]);

Using .append should get you the desired result. See below:
var pushy = ['blah', 'blaH', 'blaah'];
for(i=0;i<pushy.length;i++){
$("#demo").append("<div>Im one heck of a div and more!</div>" + pushy[i]);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="demo"></div>

Convert HTML text into plain text [duplicate]

This question already has answers here:
How to get the pure text without HTML element using JavaScript?
(10 answers)
Closed 5 years ago.
Is there a method or function that does this, or do I have to check each character of a string. To give an idea on what I'm talking about, for example. I have an HTML TEXT like:
<p><strong>Welcome </strong>to this <em>message, </em><span style="text-decoration: underline;">you may come in peace.</span></p>
I need to convert it into a plain text, resulting into:
Welcome to this message, you may come in peace.
The text will come from a textarea which is a child of a div with an id = editor-email.
I also wanted to take the current text, but it won't work.
var textEmail = $('#editor-email').find('textarea').text();

You can do it like with pure JS
let a = `<p><strong>Welcome </strong>to this <em>message, </em><span style="text-decoration: underline;">you may come in peace.</span></p>
`;
let d = document.createElement('div');
d.innerHTML = a;
console.log(d.innerText);

If you're looking for a JQuery-free solution, you can select the element and use .innerText:
document.querySelector('#myElement').innerText

I think you need:
$("p").text()
EDIT:
If you want the value from the textarea then you will need:
$("#editor-email > textarea").val();

How do I select a class with Inner html?

So I have two divs:
<div class="someGenericClass">1 Item</div>
<div class="someGenericClass">Another Item</div>
If I am given two variables:
classVariable = ".someGenericClass";
innerHTMLVariable = "Another Item";
How can I select the second div element based on class, and then the innerHTML if I have no say in adding an ID to that section. Using either javascript or jQuery. I know this isn't optimal to search by innerHTML, but I don't have a say in adding ID's and so on with what I'm doing, and I can't rely on the divs being in a set order.
$(classVariable).somehowInnerHTML?
Thanks

Well you already know that this is not very reliable to search by element innerHTML content, so.. I will give you some hints of how you can do it.
1). With pure Javascript I would use filter method of Array:
var classVariable = ".someGenericClass";
var innerHTMLVariable = "Another Item";
var found = [].slice.call(document.querySelectorAll(classVariable)).filter(function(div) {
return div.innerHTML === innerHTMLVariable;
});
This code will find all the divs with innerHTML content equal to innerHTMLVariable.
2). With jQuery:
$(classVariable + ':contains(' + innerHTMLVariable + ')');
Above code is not equivalent to pure js version, because it uses :contains selector, so it matches divs which have text content, but of course it will also match <div class="someGenericClass">Some text Another Item content</div>.
jQuery equivalent would be
$(classVariable).filter(function() {
return $(this).text() === innerHTMLVariable;
});

You can use
$(".someGenericClass:contains('Another Item')" ).<any action you want to do in this element>
To get the object in a variable:
var variable = $(".someGenericClass:contains('Another Item')" );

How to append text to a div element?

I’m using AJAX to append data to a <div> element, where I fill the <div> from JavaScript. How can I append new data to the <div> without losing the previous data found in it?

Try this:
var div = document.getElementById('divID');
div.innerHTML += 'Extra stuff';

Using appendChild:
var theDiv = document.getElementById("<ID_OF_THE_DIV>");
var content = document.createTextNode("<YOUR_CONTENT>");
theDiv.appendChild(content);
Using innerHTML:
This approach will remove all the listeners to the existing elements as mentioned by #BiAiB. So use caution if you are planning to use this version.
var theDiv = document.getElementById("<ID_OF_THE_DIV>");
theDiv.innerHTML += "<YOUR_CONTENT>";

Beware of innerHTML, you sort of lose something when you use it:
theDiv.innerHTML += 'content';
Is equivalent to:
theDiv.innerHTML = theDiv.innerHTML + 'content';
Which will destroy all nodes inside your div and recreate new ones. All references and listeners to elements inside it will be lost.
If you need to keep them (when you have attached a click handler, for example), you have to append the new contents with the DOM functions(appendChild,insertAfter,insertBefore):
var newNode = document.createElement('div');
newNode.innerHTML = data;
theDiv.appendChild(newNode);

If you want to do it fast and don't want to lose references and listeners use: .insertAdjacentHTML();
"It does not reparse the element it is being used on and thus it does not corrupt the existing elements inside the element. This, and avoiding the extra step of serialization make it much faster than direct innerHTML manipulation."
Supported on all mainline browsers (IE6+, FF8+,All Others and Mobile): http://caniuse.com/#feat=insertadjacenthtml
Example from https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML
// <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>

If you are using jQuery you can use $('#mydiv').append('html content') and it will keep the existing content.
http://api.jquery.com/append/

IE9+ (Vista+) solution, without creating new text nodes:
var div = document.getElementById("divID");
div.textContent += data + " ";
However, this didn't quite do the trick for me since I needed a new line after each message, so my DIV turned into a styled UL with this code:
var li = document.createElement("li");
var text = document.createTextNode(data);
li.appendChild(text);
ul.appendChild(li);
From https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent :
Differences from innerHTML
innerHTML returns the HTML as its name indicates. Quite often, in order to retrieve or write text within an element, people use innerHTML. textContent should be used instead. Because the text is not parsed as HTML, it's likely to have better performance. Moreover, this avoids an XSS attack vector.

Even this will work:
var div = document.getElementById('divID');
div.innerHTML += 'Text to append';

An option that I think is better than any of the ones mentioned so far is Element.insertAdjacentText().
// Example listener on a child element
// Included in this snippet to show that the listener does not get corrupted
document.querySelector('button').addEventListener('click', () => {
console.log('click');
});
// to actually insert the text:
document.querySelector('div').insertAdjacentText('beforeend', 'more text');
<div>
<button>click</button>
</div>
Advantages to this approach include:
Does not modify the existing nodes in the DOM; does not corrupt event listeners
Inserts text, not HTML (Best to only use .insertAdjacentHTML when deliberately inserting HTML - using it unnecessarily is less semantically appropriate and can increase the risk of XSS)
Flexible; the first argument to .insertAdjacentText may be beforebegin, beforeend, afterbegin, afterend, depending on where you'd like the text to be inserted

you can use jQuery. which make it very simple.
just download the jQuery file add jQuery into your HTML
or you can user online link:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
and try this:
$("#divID").append(data);

The following method is less general than others however it's great when you are sure that your last child node of the div is already a text node. In this way you won't create a new text node using appendData MDN Reference AppendData
let mydiv = document.getElementById("divId");
let lastChild = mydiv.lastChild;
if(lastChild && lastChild.nodeType === Node.TEXT_NODE ) //test if there is at least a node and the last is a text node
lastChild.appendData("YOUR TEXT CONTENT");

java script
document.getElementById("divID").html("this text will be added to div");
jquery
$("#divID").html("this text will be added to div");
Use .html() without any arguments to see that you have entered.
You can use the browser console to quickly test these functions before using them in your code.

Why not just use setAttribute ?
thisDiv.setAttribute('attrName','data you wish to append');
Then you can get this data by :
thisDiv.attrName;

Remove tag around a text node using javascript

If I have some HTML that looks like this:
<div id="text">
This is some text that is being written <span class="highlight">with
a highlighted section</span> and some text following it.
</div>
And I want to remove the "span" leaving the text node within, how would I go about doing that? I tried using jQuery to do the following:
wrap = $('.highlight');
wrap.children().insertBefore(wrap);
wrap.remove();
But that doesn't work I'm guessing because children returns an empty set since there's only a text node in there. So all that happens is that the span and its contents are removed.
I'm also open to alternatives to my approach here. What's happening is that my code actually creates that span when a user selects a block of text. It wraps the selected text in a span to visually differentiate it. I need to remove the span afterward though because of some quirks with the way mozilla's range object works.
EDIT: I don't want to replace the entire content of '#text' by the way since it could be very large.

You get the text, and replace the span with it:
var wrap = $('.highlight');
var text = wrap.text();
wrap.replaceWith(text);

wrap it in a plugin
(function($) {
$.fn.tagRemover = function() {
return this.each(function() {
var $this = $(this);
var text = $this.text();
$this.replaceWith(text);
});
}
})(jQuery);
and then use like so
$('div span').tagRemover();
Working Demo here - add /edit to the URL to play with the code

This works:
wrap = $('.highlight');
wrap.before(wrap.text());
wrap.remove();

This will do what you want, and also preserve any tags within the .highlight span.
content = $(".highlight").contents();
$(".highlight").replaceWith(content);

element = document.getElementById("span id");
element.parentNode.insertBefore(element.firstChild, element);
element.parentNode.removeChild(element);

text.replace(/</?[^>]+(>|$)/g, "");

it would be much easier to just change the class of the span than to actually remove it. You can use pure javascript:
document.getElementById("span id").className="";
Or jquery's toggleClass function:
$("element").toggleClass("highlight");
Also, best practices say that you shouldn't use class names that imply a style, like highlight. Try "emphasized" instead. :D

A better unwrap plugin:
$.fn.unwrap = function() {
this.parent(':not(body)')
.each(function(){
$(this).replaceWith( this.childNodes );
});
return this;
};
from Ben Alman