We Keep Coding

javascript replace node and all of it childs with anothe code

How can you replace HTML tag with all tags branching inside using Javascript with other HTML code?
example:
<div class="a">
<div class="sub-a1">
<div class="sub-a12">
</div>
</div>
<div class="sub-a2">
<div class="sub-b">
</div>
</div>
I wanna replace all tags from tag div class 'a' including all sub nodes with another code.
is that's possible?
please help me.

const target = document.querySelector(".a");
target.innerHTML = //place your html here as string

Yes, this is possible. If you want to keep the div.a elements and just change the "subnodes" you have to use innerHTML in stead of outerHTML.
const divs = [...document.getElementsByClassName("a")]; //make a copy of the HTML collection so that they can be removed without being removed in the array
const newElement = "<h1>Replaced Element</h1>"; //this is your replacement element
for (let i = 0; i < divs.length; i++) { // loop through all the divs
divs[i].outerHTML = newElement; // set the outer html for the div to the replacement elemzent
}

You can do with .replaceWith() with a valid HTML code.
function replace() {
var para = document.createElement("P"); // Create a <p> element
para.innerText = "This is a paragraph"; // Insert text
document.querySelector(".a").replaceWith(para);
}
<div class="a">
<div class="sub-a1">
<div class="sub-a12">
<h4>Sample content1</h4>
</div>
</div>
<div class="sub-a2">
<div class="sub-b">
<h4>Sample content2</h4>
</div>
</div>
</div>
<button onclick="replace();"/>Click to Replace</button>

jQuery select another element with certain class in same parent

let say i have this div
<div id='parent'>
<button id='button'></button>
<div id='child'>
<div id='grandchild' class='lookAtMe'>
Some JSON text
</div>
</div>
</div>
I wanted to give the #button an on click event that returned the text at #lookAtMe div, specific to the div whom it shares parent/grandparent (in this case, the #parent div)
I tried using:
$("#button").on("click",function(){
var ReturnedText = $(this).parent(".lookAtMe").text();
console.log(RetrunedText);
});
But the console log would retruned (empty string).
Where did i do wrong? please help. Thankyou very much.

Because there is n o parent with that class. You need find().
Actually you need to write
var ReturnedText = $(this).parent().find(".lookAtMe").text();
$("#button").on("click",function(){
var ReturnedText = $(this).parent().find(".lookAtMe").text();
console.log(ReturnedText);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='parent'>
<button id='button'></button>
<div id='child'>
<div id='grandchild' class='lookAtMe'>
Some JSON text
</div>
</div>
</div>

How to dynamically append text to a modal?

I have this html
<div class="col-md-6">
<div class="jumbotron">
read more...
<div class="read-more hidden">
<p>1 - THE TEXT I NEED TO APPEND TO THE MODAL</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="jumbotron">
read more...
<div class="read-more hidden">
<p>2 - THE TEXT I NEED TO APPEND TO THE MODAL</p>
</div>
</div>
</div>
This is the section of the modal where I need to append the text within the element with the class read-more
<div class="modal-body">
<!-- TEXT FROM THE READ MORE CLASS ELEMENT NEEDS TO BE APPENDED HERE -->
</div>
And this the jQuery function I have so far where I am adding a data-attr for every element with the class read-more:
jQuery(document).ready(function($) {
var $readmore = $('.read-more');
var $readmoreParagraph = $('.read-more p');
$readmore.each(function(i, el) {
var $dataAttr = $(el).attr('data-attr', i);
});
});
To get this output:
<div class="read-more" data-attr="0">
<p>THE TEXT I NEED TO APPEND TO THE MODAL</p>
</div>
TL;DR:
I need to append to the modal-body the text on the <p> under the div with the class read-more.
Any suggestions?
UPDATE
I did this:
$('#myModal .modal-body').append($("[data-attr="+i+"] > p"));
But as a result I am getting this in the modal-body:
1 - THE TEXT I NEED TO APPEND TO THE MODAL
2 - THE TEXT I NEED TO APPEND TO THE MODAL

Use the show.bs.modal event to change the contents of the body each time it is shown.
$('#myModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget), // Button that triggered the modal
content = button.siblings('.read-more').html(),
modal = $(this);
modal.find('.modal-body').html(content);
});
See http://getbootstrap.com/javascript/#modals-related-target

From what I understood after the comments, I suggest the following:
After triggering the modal, get the content of the read-more you would like, and just use that text and place it at the modal (not appending, an append adds to the object).
Like this (example for the id 1):
$('#myModal .modal-body').html($("[data-attr=1] > p").text());

Flip divs using a function

I'm new with javascript and I have a tiny problem.
I want to create a function and by pressing that button to invert the two divs ( the first one to be placed second and viceversa). I hope you understand.
I have this code:
<div> text 1 </div>
<div> text 2 </div>
<button> invert </button>

Using pure javascript, you can simply switch the contents of each div:
function flip(){
div1_content = document.getElementById("div1").innerHTML;
div2_content = document.getElementById("div2").innerHTML;
document.getElementById("div1").innerHTML = div2_content;
document.getElementById("div2").innerHTML = div1_content;
}
<div id="div1"> Text 1 </div>
<div id="div2"> Text 2 </div>
<button onclick="flip()"> Flip it! </button>
We're simply storying the contents of each div, then assigning them to one another. Hopefully, you can take this, learn from it, and apply it how you intend to.

Here is a simple javascript solution
jsFiddle https://jsfiddle.net/xzLme043/2/
myFunction = function(){
var div1 = document.getElementById('one');
var div2 = document.getElementById('two');
var html = div1.innerHTML;
div1.innerHTML = div2.innerHTML;
div2.innerHTML = html;
};

For this solution, you'll just place the current two divs in another parent div container, and then just insert the second div before the first, on the click of the invert button. No changing or pulling of inner text or HTML required.
function invertDivs(parentDiv) {
var first = document.getElementById(parentDiv).firstElementChild;
console.log(first);
var second = document.getElementById(parentDiv).lastElementChild;
console.log(second);
document.getElementById(parentDiv).insertBefore(second, first);
}
<div id="parent">
<div id="first">div 1</div>
<div id="second">div 2</div>
</div>
<button onclick="invertDivs('parent');">invert</button>

get outer div by id, then get inner div by class

First I want to get the outer div by id, then the inner div by class (dynamically added by jquery mobile ui-collapsible content) and finally append a child text node to it.
<div id="aab" data-role="collapsible" data-content-theme="c">
<h3>Heading</h3>
<div class="ui-collapsible-content">
<div id="coll">
Collapsible Content
</div>
</div>
</div>
<p><button onclick='func()'>Button</button></p>
<script>
function func() {
var section = $("#aab > .ui-collapsible-content");
section.appendChild(document.createTextNode("Hello world!"));
}
</script>
I also tried things out with document.getElementById but somehow it doesn't work.. Thanks in advance!

You have use jquery for selection so you should use it for adding child
function func() {
var section = $("#aab > .ui-collapsible-content");
section.append("Hello world!");
}