I have an element is called divElement:
<div ....>
</div>
and I have p element is called pElement:
<p ....>
</p>
I did:
divElement.appendChild(pElement);
and I got new element:
<div ....>
<p ....>
</p>
</div>
now I want to add this unicode text (▽) after the p element in order to get:
<div ....>
<p ....>
</p>
▽
</div>
I tried:
divElement.innerHTML = "▽";
but I got:
<div ....>
▽
<p ....>
</p>
</div>
any help appreciated!
You could do this:
divElement.appendChild(document.createTextNode("▽"))
Or, if you don't want to include the literal character:
var charDiv = document.createElement('div')
charDiv.innerHTML = "▽"
document.body.appendChild(charDiv)
Simply concatenate the sign with the innerHTML of the div.
HTML :
<div id="divElement">
<p id="pElement">
Hello
</p>
</div>
javaScript :
var element = document.getElementById("divElement");
element.innerHTML += "▽";
Demo
Related
How to read text "LE 88" from the following HTML using Javascript. the text LE is not constant, it keeps on changing. It neither contains ID's, nor class names.
<body>
<div id="Record">
<div>
<div>Grade A </div>
</div>
<div>19-04-2022
</div>
<div>
<div>Subject H1
</div>
<div>
<div>LE 88
</div>
</div>
</div>
<div>
</div>
</div>
</body>
You can iterate the dom div and check for the children. In this case the div with text does not have any child. So use children and check for the textContent. If the matching text is found do the required operation
document.querySelectorAll('div').forEach((curr) => {
const child = curr.children;
if (child.length === 0 && curr.textContent.trim() === 'Marks 88') {
curr.textContent = 'Marks 88 changed'
}
})
<div>
<div>
<div>Grade A </div>
</div>
<div>19-04-2022</div>
<div>
<div>Subject H1</div>
<div>
<div>Marks 88</div>
</div>
</div>
<div>
</div>
</div>
I need to move an HTML element to a location "after" the indicated element id
<div class="some">
<div id="dest">blablabla</div>
</div>
<div id="source">
test
</div>
I want to move the div "source" after "dest":
<div class="some">
<div id="dest">blablabla</div>
<div id="source">
test
</div>
</div>
The parent of "dest" doesn't have an ID!
You can use ChildNode.after() for that
The ChildNode.after() method inserts a set of Node or DOMString objects in the children list of this ChildNode's parent, just after this ChildNode. DOMString objects are inserted as equivalent Text nodes.
function move() {
let dest = document.getElementById("dest");
let source = document.getElementById("source");
dest.after(source);
}
<div class="some">
<div id="dest">blablabla</div>
</div>
<input type="button" value="move" onclick="move()">
<div id="source">
test
</div>
I'm trying to replace an Html(Div) Into Text Element The First i created the conditions you can see it here
Html
<!-- Replace Text Here-->
<h6 class="idk1"> Replace This </h6>
<!-- Main Column -->
<div class="js-cp-main-wrp">
<div class="support-2">
<html>stuff here</html>
</div>
<div class="end-cp-wrp">
<html>stuff here</html>
<html>stuff here</html>
<html>stuff here</html>
</div>
</div>
Js Script
var woahtikcets = document.getElementsByClassName('js-cp-main-wrp');
const loadthetickets = document.getElementsByClassName('idk1');
The run this
loadthetickets.replaceWith(woahtikcets)
it show me
[object HTMLCollection] ??
this method didn't work it sigh it as undefined ? please help <3
const loadthetickets = document.getElementsByClassName('idk1')[0];
I am not at all certain about what your intention is but <html> is not just some tag in HTML. It must be the outer tag (the root of the document) and can therefore only appear once in a document. So, if you replace the <html> elements with other (legal) entities, like <span> you will very likely get some results, as you can see below:
const woahtikcets = document.querySelectorAll('.js-cp-main-wrp span'),
newtext = document.getElementsByClassName('idk1')[0].textContent;
for (var el of woahtikcets){el.textContent=newtext}
<!-- Replace Text Here-->
<h6 class="idk1"> Replace This </h6>
<!-- Main Column -->
<div class="js-cp-main-wrp">
<div class="support-2">
<span>stuff here</span>
</div>
<div class="end-cp-wrp">
<span>stuff here</span>
<span>stuff here</span>
<span>stuff here</span>
</div>
</div>
In case you want the replace operation to work in the opposite direction, you could do the following:
const newtext = document.querySelectorAll('.js-cp-main-wrp')[0].textContent,
heading = document.getElementsByClassName('idk1');
for (var el of heading){el.textContent=newtext}
<!-- Replace Text Here-->
<h6 class="idk1"> Replace This </h6>
<!-- Main Column -->
<div class="js-cp-main-wrp">
<div class="support-2">
<span>stuff here</span>
</div>
<div class="end-cp-wrp">
<span>stuff here</span>
<span>stuff here</span>
<span>stuff here</span>
</div>
</div>
I have some html to scrape.
<div class="content">
<strong> This is first content </strong> This is second content
<br />
<small>
<p>Something</p>
</small>
</div>
how to get the This is second content with cheerio ?
Using nodeType property, it could solve your problem even if you have text before <strong> tag
<div class="content">
Before first content
<strong> This is first content </strong> This is second content
<br />
<small>
<p>Something</p>
</small>
</div>
Then it could be
var cheerio = require("cheerio")
const $ = cheerio.load('<div class="content">Before first content<strong> This is first content </strong> This is second content<br /><small><p>Something</p></small></div>');
var $outer = $("div.content").contents().filter(function() {
return this.nodeType === 3;
});
console.log($outer.text()); //"Before first content This is second content"
$outer.each(function() {
console.log($(this).text());
});
//"Before first content"
//" This is second content"
Check it here
You can't directly select text nodes. I usually do something like:
$('.content strong')[0].nextSibling.data
Maybe this could help:
<div class="content">
<strong> This is first content </strong> <span class="toBeSelected">This is second content</span>
<br />
<small>
<p>Something</p>
</small>
</div>
After this you can select the text this way.
$('div .toBeSelected').html()
Ideally you should put the 'This is a second content' in span or something else to specify properly to get its content.
do this:
<div class="content">
<strong>This is first content</strong><span>This is second content</span>
<br>
<small>
<p>Something</p>
</small>
</div>
Get it like this
console.log($('.content :nth-child(2)').text())
Working Demo: https://jsfiddle.net/usmanmunir/vg1dqm3L/17/ for you.
I think you can use regex to get the second content.
const cheerio = require('cheerio');
const $ = cheerio.load(`<div class="content">
<strong> This is first content </strong> This is second content
<br />
<small>
<p> Something </p>
</small>
</div>
`);
console.log($('div').html().replace(/\n/g, '').match(/<\/strong>(.*)<br>/)[1])
I would like to find all elements which contains title on page and add new attribute to all of them.
Example:
<div title='something 1'></div>
<p>Test<div title='something 2'></div></p>
<div>
<div>
<div>
<div title='something 3'></div>
</div>
</div>
</div>
How it should look like after page load:
<div title='something 1' rel='tooltip'></div>
<p>Test<div title='something 2' rel='tooltip'></div></p>
<div>
<div>
<div>
<div title='something 3' rel='tooltip'></div>
</div>
</div>
</div>
Previously I did it manually which is bad solution for me
$('#collection_map > div > div > button').attr('rel', 'tooltip');
Try this code:-
$('div[title]').each(function() {
$(this).attr('rel', 'tooltip');
});
You don't even need jQuery for this. Here is a working example in plain JavaScript.
var elems = document.querySelectorAll('[title]')
elems.forEach(elem => elem.setAttribute('rel', 'tooltip'))
<div title='something 1'></div>
<p>Test<div title='something 2'></div></p>
<div>
<div>
<div>
<div title='something 3'></div>
</div>
</div>
</div>
Get all elements which have attribute title and then loop over it to add new attribute rel to each object.
paragraph tag cannot have block elements like div nested in it. See - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p
Paragraphs are block-level elements, and notably will automatically
close if another block-level element is parsed before the closing </p>
tag.
$('[title]').attr('rel', 'tooltip');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div title='something 1'></div>
<p>Test
<div title='something 2'></div>
</p>
<div>
<div>
<div>
<div title='something 3'></div>
</div>
</div>
</div>