Develop Reference

Why is jQuery html() method adding content to a paragraph instead of replacing it?

Why is jQuery html() method, adding the string to the content of a <p> tag instead of replacing it?
function refresh() {
$('#pContainer').html('<div>updated...</div>');
}
$(document).ready(function ($) {
window.setInterval(refresh, 3000);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p id='pContainer'>
<div>paragraph text remains</div>
</p>
In case of div tag, the content are replaced:
function refresh() {
$('#divContainer').html('<div>updated...</div>');
}
$(document).ready(function ($) {
window.setInterval(refresh, 3000);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<dic id='divContainer'>
<div>div text disappears</div>
</div>

Your HTML is not valid. A <p> cannot have a <div> as a child. The browser has automatically attempted to correct your HTML and turns it into:
<p id="pContainer">
</p><div>paragraph text remains</div>
<p></p>
As a result, when you assign to the HTML of the #pContainer, since the browser has moved the <div> outside of the <p>, the <div> remains unaffected.
As MDN puts it:
Paragraphs are block-level elements, and notably will automatically close if another block-level element is parsed before the closing </p> tag.
(In contrast, having a <div> inside another <div> is perfectly valid.)

The main problem is invalid html markup, as CertainPerformance answered before. It will be better to use some tools to prevent including incompatible elements into other.
Most simplest way to do it - use online w3c html markup validator. https://validator.w3.org/

JQuery replace all contents in a div except tags

I have to replace some characters in all a div, but when I run the code, the function replaces me also the html tags characters
my code is:
$("#main").children().each(function() {
$(this).html($(this).html().replace(/s/g, "K"));
})
<div id="main">
<p>Some contents that will be replaced... <span>this will not be in a span tag :(</span></p>
</div>
result:
<div id="main">
<p>Kome contentK that will be replaced... <Kpan>this will not be in a Kpan tag :(</Kpan></p>
</div>

If your goal is to preserve all the markup within the div but replace text within all those tags, that's difficult. You need to find just the text nodes and no other nodes and do the replacement within each of the text nodes individually.
This question may help: How do I select text nodes with jQuery?

Show all dropzone errors instead of one at a time [duplicate]

I have this HTML:
<div class="region-list" id="region_North_America">
<strong>North America</strong>
</div>
and want to add more divs after the strong element to result:
<div class="region-list" id="region_North_America">
<strong>North America</strong>
<div> ... </div>
<div> ... </div>
<div> ... </div>
</div>
I am trying this:
var row_str = '<div>content here</div>';
$('#region_North_America div:last').html(row_str);
However, there is no change to the html. This is probably so since there is no div within the element selected.
I know that the js is making it to this code because I can print the content of row_str to the console.
So, how can I get to the end of that container element to add the new items?
Thx.

Try:
$("#region_North_America").append(row_str);
using append().

Or:
$("<div>content here</div>").appendTo("#region_North_America");
To create the element on the fly, and place it in the document.
Using the appendTo method.

Your code will just place html in the last div within #region_North_America. Use the append function.
$("div.region-list").append(row_str);

How to change text in div without affecting child elements

I need to modify the following HTML using Javascript,
<div id="1">
some text
<div id="2"></div>
</div>
I have tried using $('#1').text('new text'); However, this unintentionally removes <div id="2">
How should I change some text, without changing the surrounding elements?

This will change the value of the first node (which is a text node in your example):
$('#1').contents()[0].nodeValue = 'new text';
JSFiddle

Try the following
<div id="1">
<span id='myspan'>some text</span>
<div id="2"></div>
</div>
Then use;
$('#myspan').text('new text');

By the way it is a bad practice to use ids with numbers as elements.
You can add a span if you don't want to change the style of your element.
So in your case you will do something like this (I removed the numbers as ids):
<!-- HTML -->
<div id="text-container">
<span id="some-text">some text</span>
<div id="something-else"></div>
</div>
And in your JavaScript:
//JavaScript
$('#some-text').text('new text');

If plausible, do something like the following:
<div id="1">
<span id="edit">some text</span>
<div id="2"></div>
</div>
Then, you can edit your text like so:
$('#edit').text('new text');
Basically, your putting the text you want to edit in its own element with an ID. Keep in mind that you can use any type of element you want, you don't have to use span specifically. You can change this to div or p and you'll still achieve the same result.

the best solution is to check the node type as Node.TEXT_NODE and nodeValue is not null:
$('#1')
.contents()
.filter(function() {
return this.nodeType === Node.TEXT_NODE && this.nodeValue && this.nodeValue.trim();
})
.replaceWith("new text");

My solution as an alternative to others:
var text_to_keep = $('#2').text();
$('#1').text('new text').append('<div id="2">' + text_to_keep + '</div>');
http://jsfiddle.net/LM63t/
P.S. I don't think id's that begin with a number are valid.

Retrieve text from an element and insert it somewhere else

I'd like to get the text from between the "p" tags and put it in an other element, like this:
before:
<div id="Text">
<p>$1,200.00</p>
</div>
<div id="putText">
<p></p>
</div>
after:
<div id="Text">
<p>$1,200.00</p>
</div>
<div id="putText">
<p>$1,200.00</p>
</div>
Anyone know of a Javascript that can do this?

The below function copies the contents of the first paragraph under an element with ID ID to a paragraph under another element with ID putID.
function copyContents(id) {
var source = document.getElementById(id).getElementsByTagName("p")[0];
var target = document.getElementById("put" + id).getElementsByTagName("p")[0];
target.innerHTML = source.innerHTML;
}
copyContents("Text");

you can use following jQuery code
$('#putText p').html($('#Text p').html());

If you have jQuery at your disposal, it's fairly easy - something like this should work:
$('#putText>p').text($('#Text>p').text())
If you don't, then you'll have to resort to some DOM manipulation - the same stuff jQuery does behind the scenes, only you need to code it up yourself.