I'm a wondering how I can get innerHTML of div when it contains a div element and a text. My code looks like this:
var outer = document.getElementById("outer").childNodes;
outer.forEach(function(e) {
console.log(e.innerHTML);
});
<div id="outer">
<div class="item">
<div class="icon"></div>
Hello
</div>
</div>
As you can see, innerHTML is getting the child div and the text, but I only want the text. Is it possible to make it without splitting or something?
I would put Hello in a separate container if you can.
var outer = document.getElementById("outer");
var firstItem = outer.children[0];
var text = firstItem.querySelector('.text').innerHTML;
console.log(text);
<div id="outer">
<div class="item">
<div class="icon"></div>
<span class="text">Hello</span>
</div>
</div>
That way you have more control over it if you want to add more content
Related
I'm trying to have js change the title attributes for each div based on each divs text content in html.
I want to add the title of each div from its own text, so for example: "Text Example 1"s title would be "Text Example 1", "Text Example 2"s title would be "Text Example 2" and so on.
Currently I've made a js code that does that but only for one of the divs. I'm a complete beginner in js so any advice is appreciated.
<div class="example">
<div class="text1" id="id-text1">Text Example 1</div>
</div>
<div class="example">
<div class="text1" id="id-text1">Text Example 2</div>
</div>
<div class="example">
<div class="text1" id="id-text1">Text Example 3</div>
</div>
const titleContent = document.getElementById("id-text1");
function ChangeTitle(){
document.querySelectorAll('.text1').forEach(function ChangeTitleSecond(){
titleContent.setAttribute('title', titleContent.textContent);
})
};
window.onload = ChangeTitle();
Steps to set title of <div> to it's (text) content:
Get all of the <div>s (selector is div.text1)
For each of them, set title to innerText value
Solution:
<div class="example">
<div class="text1">Text Example 1</div>
</div>
<div class="example">
<div class="text1">Text Example 2</div>
</div>
<div class="example">
<div class="text1">Text Example 3</div>
</div>
<script>
divs = Array.from(document.querySelectorAll("div.text1"))
for (elem of divs) {
elem.setAttribute("title", elem.innerText)
}
</script>
Demo
getElementById() returns only a single element. id attributes should be unique within the document. But that's ok, you don't need it. You're already getting a list of the elements to go through with querySelectorAll()
forEach() will pass each element as the first parameter of your function.
function ChangeTitle(){
document.querySelectorAll('.text1').forEach(function
ChangeTitleSecond(item){
item.setAttribute('title', item.textContent);
})
};
window.onload = ChangeTitle();
You can use this implementation. If you need a list of some items which has the same attributes (such as id, class or tag) you can pick them all through their specific attribute of them by querySelectorAll.
const titleContentList = document.querySelectorAll('[id=id-text1]')
function ChangeTitle(){
titleContentList.forEach((item)=>{
const title = item.textContent
if(!title) return;
item.setAttribute('title',title)
})
}
window.onload = ChangeTitle();
I just picked up JavaScript this month and I'm trying to understand the forEach method along with the data-set idea to print the custom data-set (data-number) for each of the items in the array on the console. So when I click the button, it shows the data-numbers for each of the array items (div-elements) on the console.
It keeps returning the error
"Uncaught TypeError: Cannot read property 'number' of undefined", even when I've assigned number a value.
I notice that when I use just one div element and remove the "Array.from" it prints the data-number for that one element on the console, with no errors.
Could it be a syntax problem, or something I'm missing?
myDiv = Array.from(document.getElementsByClassName('myDiv'));
function myFunction() {
const number = myDiv.dataset["number"];
console.log(number);
}
<!DOCTYPE html>
<html>
<head>
<title> Datasets</title>
</head>
<body>
<div class="myDiv" data-name="MrMr" data-number="1">
THIS IS A TEXT
</div>
<div class="myDiv" data-number="2">
another text.
</div>
<div class="myDiv" data-number="3">
another text.
</div>
<div class="myDiv" data-number="4">
another text.
</div>
<p id="demo"></p>
<button onclick="myDiv.forEach(myFunction());">Button</button>
<script>
</script>
</body>
</html>
I'm hoping to get a simple array that shows the data-sets I've saved in the div tags (i.e 1, 2, 3, 4).
Couple of things - don't use forEach(), and use map() in your myFunction:
myDiv = Array.from(document.getElementsByClassName('myDiv'));
function myFunction(){
const number = myDiv.map(d => d.dataset["number"]);
console.log(number);
}
<div class="myDiv" data-name="MrMr" data-number="1">
THIS IS A TEXT
</div>
<div class="myDiv" data-number="2">
another text.
</div>
<div class="myDiv" data-number="3">
another text.
</div>
<div class="myDiv" data-number="4">
another text.
</div>
<p id="demo"></p>
<button onclick="myFunction();">Button</button>
Why not something like so:
var myFancyButton = document.querySelector('.myFancyButton'); // get the button via querySelector("className")
myFancyButton.addEventListener('click', function() { // add a click event listener to the button
var myDivs = document.querySelectorAll('.myDiv'); // query for alle elements with a class name = "myDiv"
myDivs.forEach(function(myDiv) { // now use forEach on all those divs
const number = myDiv.dataset["number"];
console.log(number);
});
});
<div class="myDiv" data-name="MrMr" data-number="1">
THIS IS A TEXT
</div>
<div class="myDiv" data-number="2">
another text.
</div>
<div class="myDiv" data-number="3">
another text.
</div>
<div class="myDiv" data-number="4">
another text.
</div>
<p id="demo"></p>
<button class="myFancyButton">Button</button>
First - the function you want array.forEach() to execute needs an element to process. In your case these are the individual DIV elements. So you're function needs a parameter that 'links' to that particular element.
This can be done like:
function myFunction(element);
The attribute you want to query is called data-number, so I'd recommend using it. If you want to get a specific property of a DOM element, you can use element.getAttribute(attribute);
Here's a complete example:
myDiv = Array.from(document.getElementsByClassName('myDiv'));
function myFunction(element) {
var theNumber = element.getAttribute("data-number");
console.log(theNumber);
}
myDiv.forEach(myFunction);
<div class="myDiv" data-name="MrMr" data-number="1">
THIS IS A TEXT
</div>
<div class="myDiv" data-number="2">
another text.
</div>
<div class="myDiv" data-number="3">
another text.
</div>
<div class="myDiv" data-number="4">
another text.
</div>
I want to move text from multiple elements to other elements in order. I don't want to move the element, just the inner text. The setup is basically:
<p class='button_text'>Text here.</p>
<p class='button_text'>More text here.</p>
`
<div class="button">Button 1</div> <div class="button">Button 2</div>
Which I tried to change with:
var button_text = $('.button_text').html();
$('.button').html(button_text);
which produces
<div class="button">Text here.</div>
<div class="button">Text here.</div>
But I want it to produce:
<div class="button">Text here.</div>
<div class="button">More text here.</div>
Help much appreciated!
You can try looping through the p tags first. like -
$(document).ready(function(){
var btn = $('.button_text');
var index = 0;
$('.button').each(function(){
$(this).html($(btn[index]).text());
index++;
});
});
Is there a way to get a next element from a current sister element? Sorry if confusing.
<div class="wrapper">
<div class="paDiv">
<div class="saDivOne">
</div>
</div>
<div class="paDivTwo">
<div class="saDivTwo">
</div>
</div>
</div>
<script>
$('.paDiv').each(function(){
htmlContent = $(this).children().html();
SisterDivContent = $(this).next('.paDivTwo').children().html();
console.log(SisterDivContent);
})
</script>
$('.paDiv').each(function(){
var SisterDivContent = $(this).parent().find('.saDivTwo').html();
alert(SisterDivContent);
});
You have to add some contents inside div class 'saDivTwo'. Otherwise you will get empty content only.
Demo:
http://jsfiddle.net/U8n7g/
Try using .sibling:
$('.paDiv').sibling('paDivTwo').html()
I have a bunch of divs one after the other.
<div class="betweenable">some content</div>
<div class="betweenable">other content</div>
<div class="betweenable">yet another</div>
When I click the last div, I want to insert the text new content in a div before it, so the final result will be
<div class="betweenable">some content</div>
<div class="betweenable">other content</div>
<div class="betweenable">new content</div>
<div class="betweenable">yet another</div>
I tried append but it's adding the new markup inside the select div at the top. I want it inserted outside the selected div and right before it. What should I use instead of this line
var newmarkup = '<div class="betweenable">new content</div>';
$(this).prepend();
You can try this
$('.betweenable').click(function(){
var newmarkup = '<div class="betweenable">new content</div>';
$(this).before(newmarkup);
});
Here's an example : http://jsfiddle.net/jomanlk/C4XyH/
you can use .before here is DEMO