We Keep Coding

Removing inline styles from html string

I'm getting data from Wordpress, which contains HTML with inline styles. Before I insert this HTML into my React website, I would like to remove all inline styles. For example, I get something like:
<div style='height: 500px'>
<img style='height: 300px; width: 250px'/>
... more elements with inline styles
</div>
I'm looking for a clean way of doing this because I've tried using other solutions on SO and they use Jquery and other JS methods which would not work since I'm using React to build my website.

You call select all the html tags and using document.querySelectorAll('*') and iterate through each one of them and using removeAttribute, removes style attribute.
const htmlString = `<div style='height: 500px'>
<img style='height: 300px; width: 250px'/>
<p> text</p>
<div style="color: red">Red text</div>
... more elements with inline styles
</div>`;
const htmlNode = document.createElement('div');
htmlNode.innerHTML = htmlString;
htmlNode.querySelectorAll('*').forEach(function(node) {
node.removeAttribute('style');
});
console.log(htmlNode.innerHTML);

You can find all tag in your body then use removeAttribute to remove style attribute.
function remove(){
var allBodyTag = document.body.getElementsByTagName("*");
for (var i = 0; i < allBodyTag.length; i++) {
allBodyTag[i].removeAttribute("style");
}
}
<button onClick="remove()">Remove </button>
<div style='height: 500px'>
This is text
<img style='height: 50px; width: 250px'/>
</div>

appending complete html of one dive into new div

I am using JQuery for this:
Taking complete html and appending into a new div
My JQuery code:
$(document).ready(function(){
$("#addNew").click(function(){
var maindiv = document.getElementById('nestedFeilds').html();
$("#showhere").append('maindiv');
});
});
The HTML is pretty complex and lengthy so take just reference
<div class= "row" id="mainContainer">
<label for="Education" style="margin-left: 30px ; float:left;">Education</label>
<div class="col-xs-4 inner"></div>
<div class="col-xs-8 verticalLine" id="nestedFeilds" style=" margin-left: 10px ;float:left; display: none;">
In the last div, it is actually a form and I need its complete html to be shown with different name attribute when ever I click button
I am calling my function like this
<div id= "showhere"></div>
<div style="margin-left: 133px;float:left;">
<a id="addNew"> Add Education</a>
</div>

If you want to get innerHTML, you should use element.innerHTML, and if you want to append previously saved inner HTML, you can use element.append(variableWithPreviousInnerHTML). Here is the working example:
$(document).ready(function() {
$("#addNew").click(function() {
var maindiv = document.getElementById('nestedFeilds').innerHTML;
$("#showhere").append(maindiv);
});
});
div {
width: 100px;
height: 100px;
border: 1px gray solid;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="nestedFeilds">Content from #nestedFeilds</div>
<div id="showhere"></div>
<button id="addNew">Click</button>
If anything isn't clear, feel free to ask.

What's the best way to add an element in an existing class element with basic j.s , jQuery?

Say I had some code in HTML like:
<div id="some_element" class="element_class">
How do I add/create a new div element and add it to the "element_class" with j.s/jQuery?

You can do like this using only javascript
var createDiv = document.createElement('div');
createDiv.textContent='inner div';
document.getElementById('some_element').appendChild(createDiv)

Using Jquery
To add elements at the end
$('#some_element').append("<div>1</div><div>2</div>");
To add element in in the starting
$('#some_element').prepend("<div>1</div><div>2</div>");

Here's a simple solution. Hope it helps!
$(document).ready(function(){
$("#mybutton").click(function () {
if($('.newDiv').length !== 1){
$("#some_element").append("<div class = 'newDiv'>This is a new div</div>");
}
});
});
.newDiv{
height: 80px;
width: 40px;
background: yellow;
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<button id = "mybutton">Click me</button>
<div id="some_element" class="element_class">

Sort Divs by inline "style" attribute

Is it possibile to sort divs by an inline width attribute (highest first)?
For example that are my divs:
<div style="width: 30.8px"></div>
<div style="width: 10.45px"></div>
<div style="width: 20px"></div>
I was looking for something like this, but it only works with div content ;(
$('.list li').sort(sortDescending).appendTo('.list');
function sortDescending(a, b) {
var date1 = $(a).find("div").text()
var date2 = $(b).find("div").text();
return $(b).find("div").text() - $(a).find("div").text();
};

It would be easier to just sort by the width of the element itself. This has two benefits; firstly you don't have to dissect the string to get the width value and secondly (and more importantly) you can then set the width property in an external stylesheet and the logic will still work. Try this:
$('div').sort(function(a, b) {
return $(a).width() > $(b).width() ? -1 : $(a).width() < $(b).width() ? 1 : 0;
}).appendTo('.list');
div div {
border: 1px solid #C00;
margin: 5px;
height: 5px;
}
#foo {
width: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list">
<div style="width: 30.8px"></div>
<div style="width: 10.45px"></div>
<div style="width: 20px"></div>
<div id="foo"></div>
</div>
Note that your selector is aiming for li elements yet your sample is using div elements. I'm just presuming this is just an oversight when writing the question.

Pass HTML element to div like string

I'm trying to pass HTML text to my div, I need this string rendered as HTML elements, My code:
<div id="divchat" style="width: 500px; height: 300px; border: 2px solid brown;"/></div>
#Html.TextBoxFor(model => model.msj)
<button type="submit" id="btnSend">Send</button>
<script>
$(function(){
var chatNS = '#HttpContext.Current.Application["Chateo"].ToString()';
$("#divchat").append(chatNS);
});
</script>
div is showing content just like a string, how could I get HTML elements to be rendered correctly into divchat?

Have you tried wrapping your HttpContext.Current.Application["Chateo"] in #Html.Raw()?
<script>
$(function(){
var chatNS = '#Html.Raw(HttpContext.Current.Application["Chateo"])';
$("#divchat").append(chatNS);
});
</script>

Try
$("#divchat").html(chatNS);