I'm trying to get the value of one specific div class, subtract that by 500 and then populate the result into another div.
I'm not quite sure what process I would need in order to populate the result of the subtraction into the other div.
Something like this:
<div class="main-value">5000</div>
<!-- main-value - 500-->
<div class="new-value"></div>
//Script
var main = $(".main-value");
main.html(parseInt(main.html()) - 500 ).appendTo($(".new-value"));
So far, the subtraction work, but I can't get it to append the updated value to the empty div and keep the original one intact.
For that, you need to clone the element otherwise it may update and append the original element. Although parsing the string is optional since the operation is subtraction.
var main = $(".main-value");
main.clone().text(main.text() - 500).appendTo($(".new-value"));
//----^^^^----- clone the element
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main-value">5000</div>
<!-- main-value - 500-->
<div class="new-value"></div>
In case you just want to show the result in new-value class then do it like.
var main = $(".main-value");
// update the text content in `new-value` div
$(".new-value").text(main.html() - 500);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main-value">5000</div>
<!-- main-value - 500-->
<div class="new-value"></div>
Try this:
var mainval = $(".main-value").text();
$(".new-value").text(parseInt(mainval) - 500);
Reference: http://api.jquery.com/text/
Break it into two:
var main = $(".main-value");
mainValue = parseInt(main.html());
$(".new-value").html(mainValue);
<!doctype html>
<html>
<body>
<div class="main-value">5000</div>
<div class="new-value"> </div>
<script>
var x= document.getElementsByClassName("main-value")[0].innerHTML;
var y= document.getElementsByClassName("new-value")[0];
y.innerHTML= x-500;
</script>
</body>
</html>
Related
Hi how can I extract the text of an document as an array within javascript.
It´s easy to get the innerHTML, but I do not get the text before and after the div for example.
This should be the output:
[0]=before div
[1]=innerHTML
[2]=aferHTML
[3]=before div2
[4]=innerHTML2
[5]=aferHTML2
Of the following document:
<html><head>
<body>
before div <div>innerHTML </div>aferHTML
before div2 <div>innerHTML2 </div>aferHTML2
</body></html>
I found this link, but it does not get the text before and after the elements as well:
How to get all text from all tags in one array?
You scenario is not clear. Could you please elaborate more the specific reason.
However if you want to get text from all elements in a document, kindly review this thread -> link.
By using the childNodes property you can achieve this. But for afterHtml and before div2, you need to do some extra work because they are part of the same text node.
Please take a look at the snippet below. You can remove the last element of the array manually.
const arr = [];
document.body.childNodes.forEach(node => {
arr.push(node.textContent.trim());
})
console.log(arr)
<body>
before div <div>innerHTML </div>aferHTML
before div2 <div>innerHTML2 </div>aferHTML2
</body>
Okay here's mine.
As you can see, I wrapped your HTML inside a div with a class name content.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="content">
before div <div>innerHTML </div>aferHTML
before div2 <div>innerHTML2 </div>aferHTML2
</div>
</body>
</html>
<script type="text/javascript">
var body = document.querySelector('.content').children;
var list = [];
for (var i = 0; i < body.length ; i++) {
var before = body[i].previousSibling.nodeValue.trim();
var inner = body[i].innerHTML;
var after = body[i].nextSibling.nodeValue.trim();
if (before && i == 0) list.push(before); //prevent duplication and empty value
list.push(inner);
if(after) list.push(after); //prevent empty value
}
console.log(list); //output
</script>
in innerHTML, you could split the string using inner.split(" ") if you like.
I think the title is clear, but I've some examples for you guys, here is my idea:
I've this Html5:
<html>
<head></head>
<body class="oldParent">
<div class="p1"></div>
<div class="p2"></div>
<div class="p3"></div>
<div class="p4"></div>
<div class="p5"></div>
<div class="NewParent"></div>
</body>
</html>
as you can see my NewParent is child of My OldParent
(i want to move all body elements except NewParent), and i need to move all elements except this one:
<div class="**NewParent**"></div>
I'm New to Javascript and I thought that you guys know how to add exception
for this, I've found this too:
var newParent = document.getElementById('NewParent');
var oldParent = document.getElementById('OldParent');
while (oldParent.childNodes.length > 0) {
newParent.appendChild(oldParent.childNodes[0]);
}
but i don't know how to add exception!?
I need help:(
You're pretty close with your original code. Just switch to getElementsByClassName - but be aware it returns a collection so you'll have to index into it. You might want to switch to id's if that's an option.
Then you can basically just add an if condition to test for the className of the element to exclude:
var newParent = document.getElementsByClassName('NewParent')[0];
var oldParent = document.getElementsByClassName('oldParent')[0];
while (oldParent.childNodes.length > 0) {
if (oldParent.childNodes[0].className !== 'NewParent') {
newParent.appendChild(oldParent.childNodes[0]);
}
else { break; }
}
Here's a jsfiddle you can play with. Be careful with your class names, the ones for old and new parents have different casing.
I would add while this is closest to your original code, it may not actually be the best way to solve this. This assumes your new parent is the last in the collection as it has to break out of your while loop due to the way you're looping. Cloning as the other answer shows is probably a safer solution.
You can try below method.
Get your current element which you want to retain.
Create a Clone of that element.
Empty the entire parent element.
Append the element which you have cloned earlier.
var newParent = document.getElementsByClassName('NewParent')[0];
var cln = newParent.cloneNode(true);
document.getElementsByClassName('oldParent')[0].innerHTML = '';
document.getElementsByClassName('oldParent')[0].appendChild(cln);
<html>
<head></head>
<body class="oldParent">
<div class="p1">1</div>
<div class="p2">2</div>
<div class="p3">3</div>
<div class="p4"5></div>
<div class="p5">5</div>
<div class="NewParent">77</div>
</body>
</html>
I have a function that's run on a button click. This function will get all of the HTML inside a certain element. That works fine. However, I would like to clean the returned string (HTML) up before using it further in my function:
exportHTML(){
const element = document.getElementById('content');
const innerHTML = element.innerHTML;
}
This works. But due to using Angular, Angular syntax is included within the HTML based on conditions in the source code. For example:
<div _ngcontent-c1=""></div>
OR
<div ng-reflect-klass="panel album"></div>
<div ng-reflect-ng-class="blue"></div>
Is it at all possible to filter these types of values out? In regards to the second and third example above, the classes within those would change quite often:
Is it possible to filter out and remove all _ngcontent-c1="" text
Is it possible to filter out and remove all ng-reflect-klass & ng-reflect-ng-class including the following open and closed quotes (to remove what's inside)
OK, so the attributes would be constant but the values of the attributes would change? If so, you could try this:
.replace(/ng-reflect-klass=\".?\"/,"").replace(/ng-reflect-ng-class=\".?\"/,"").replace(/_ngcontent-c1=\".*?\"/,"")
var content = 'stuff<div ng-reflect-klass="panel album"></div><div ng-reflect-ng-class="blue"></div><div _ngcontent-c1=""></div>end stuff';
console.log(content.replace(/ng-reflect-klass=\".*?\"/g,"").replace(/ng-reflect-ng-class=\".*?\"/g,"").replace(/_ngcontent-c1=\".*?\"/g,""));
Look at the console to view the result.
You could do it with RegExp
const innerHTML = element.innerHTML.replace(/ (_ngcon|ng-).*?".*?"/g, '');
(_ngcon|ng-) find _ngcon or ng- including space as first character
.*?" match everything until first "
.*?" and match everything again for the closing "
I created a JSFiddle as an example of how to do this without using jQuery.
Using the HTML code below as an example
<div id="origin-content">
<div id="div1" _ngcontent-c1="">Content 1</div>
<div id="div2" ng-reflect-klass="panel album">Content 2</div>
<div id="div3" ng-reflect-ng-class="blue">Content 3</div>
</div>
<hr>
<div id="target-content">
</div>
I extracted all children from origin-content and copied them to target-content using the code that follows.
var result = document.getElementById('target-content');
var elems = document.querySelector('#origin-content').children;
var count = elems.length;
for (var i = 0; i < count; i++) {
var val = elems[i];
val.removeAttribute('_ngcontent-c1');
val.removeAttribute('ng-reflect-klass');
val.removeAttribute('ng-reflect-ng-class');
result.innerHTML += val.outerHTML;
}
There is still plenty of room for improvement.
I hope it helps to solve the OP question.
The following solution will remove all the attributes from element:
You can get all the children first. Then loop through them with forEach(). In each iteration, you can use while loop to removeAttribute() until they are exist in the element.
Try the following way:
function exportHTML(){
const element = document.getElementById('content');
const innerHTML = [].slice.call(element.children);
innerHTML.forEach(function(el){
while(el.attributes.length > 0)
el.removeAttribute(el.attributes[0].name);
});
console.log(document.getElementById('content').innerHTML); // output
}
exportHTML();
<div id="content">
<div _ngcontent-c1=""></div>
<div ng-reflect-klass="panel album"></div>
<div ng-reflect-ng-class="blue" another-test></div>
<span test="test-element"></span>
</div>
What I am trying to do is very simple, but I have no idea how I can store result back? So what I am doing here
<div id="test_div">
<div class="wrapper1">My logo wrapper</div>
<div class="keep">My Table</div>
<div class="wrapper2">My Wrapper</div>
</div>
Now, using Javascript, with jQuery, I'll get everything like following:
function foo() {
var html = document.getElementById("test_div").innerHTML;
//now I want to remove some inner divs
var result = $(html).remove("wrapper1"); //I know this is wrong
//but I would like to do something like above, so after I remove an element
//and its contents, the function will return a result
}
So, it's very simple but I don't know how I can do this: first remove a div element inside test_div and then return the remaining contents of test_div. Sorry I forgot to add one very important line I don't wont to remove element from the current page as suggested solution and even using remove method will remove it from the main page So I wanted to keep as it is on the main page but remove and just get refine result to store in result var
Try this :
fiddle : http://jsfiddle.net/3trqLju4/
<div id="test_div">
<div class="wrapper1">My logo wrapper</div>
<div class="keep">My Table</div>
<div class="wrapper2">My Wrapper</div>
</div>
<input type="button" id="btn" value="refine"/>
$("#btn").click(function()
{
var copyhtml = $("#test_div").clone();
$(copyhtml).find(".wrapper1").remove();
alert(copyhtml.html());
});
$(html).remove(".wrapper1");
and
result = document.getElementById("test_div").innerHTML;
Assuming you would like to remove wrapper1 from test_div, you could use:
$("#wrapper1").remove();
If you would like to move wrapper1 and use it later:
var wrapper1 = $("#wrapper1").detach();
$(wrapper1).appendTo("#some-new-div");
Following is my code and relevant HTML , what i wanna do is that i wanna count the number of search-img-box within search-img-ctrl but i get 0 as output, just to tell here that
following div search-img-box is dynamically created.
jQuery(document).ready(function() {
var numberOfDivs = jQuery('#search-img-ctrl').filter('.search-img-box').length;
alert(numberOfDivs);
});
following is my HTML
<div id="search-img-ctrl" class="search-img-ctrl">
<div id="search-img-box" class="search-img-box" name="search-img-box">
<img width="335" height="206" src="" alt="">
<ul>
</div>
<div id="search-img-box" class="search-img-box" name="search-img-box">
</div> </div>
Here's a fiddle: http://jsfiddle.net/t5jcT/
I changed filter to find and got rid of the duplicate ids in the html.
jQuery(document).ready(function() {
var numberOfDivs = jQuery('#search-img-ctrl').find('.search-img-box').length;
alert(numberOfDivs);
});
or you can use selectors instead of the find as others have pointed out:
jQuery(document).ready(function() {
var numberOfDivs = jQuery('#search-img-ctrl .search-img-box').length;
alert(numberOfDivs);
});
use .find instead of .filter:
var numberOfDivs = jQuery('#search-img-ctrl').find('.search-img-box').length;
alert(numberOfDivs);
If you want to only find the number of direct children with that class you can use .children
var numberOfDivs = jQuery('#search-img-ctrl').children('.search-img-box').length;
Also make sure you edit your html so that your html elements don't have duplicate IDs