This question already has answers here:
Why can't the <p> tag contain a <div> tag inside it?
(6 answers)
Closed 4 years ago.
I am trying to understand event bubbling, while try with my own code:
`
<!DOCTYPE html>
<html>
<body>
<div onclick="alert('1')">
1
<div onclick="alert('2')">
2
<div onclick="alert('3')">3</div>
</div>
</div>
</body>
</html>
Here I saw that, when click div 3, it shows three alert (3 2 1). After I change the first div tag to P tag, I click that same div 3 it come up with only two alert (3 2). Here, why alert 1 is not coming since it is under the parent(P) tag.
After change first div tag to P tag, code looks like below:
<p onclick="alert('1')">
1
<div onclick="alert('2')">
2
<div onclick="alert('3')">3</div>
</div>
</p>
Simply because the browser will fix your mistake in layering yout HTML markup.
The closing </p> tag is inserted where appropriate (before the block-level DIV) since <div> is not an allowed descendant of <p>.
The resulting markup is:
<p onclick="alert('1')">
1
</p>
<div onclick="alert('2')">
2
<div onclick="alert('3')">3</div>
</div>
<p></p>
Related
This question already has answers here:
Jquery - Remove only text content from a div
(6 answers)
Closed 4 years ago.
I have
<div class="col-xs-12">
Congratulations! Here is your submitted post.
<p class="post-details">Lorem ipsum</p>
</div>
How can i remove Congratulations! Here is your submitted post. ?
I tried few things like:
$(".post-details").each(function(){
var text = $(".post-details").prev().text().remove();
console.log(text);
});
But it doesn't catch that text.
Also tried this answer but it doesn't work https://stackoverflow.com/a/1571096/1018804
Check this:
https://stackoverflow.com/a/17852238/5089697
It filters the content inside any element and find the correct node you want to remove (in your case the text which is not wrapped in any element but it is a child to the div). Try it.
You could put the text you want to delete inside a div element with an id and remove that div.
Like this:
<div class="col-xs-12">
<div id=“textToRemove”>Congratulations! Here is your submitted post.</div>
<p class="post-details">Lorem ipsum</p>
</div>
Then remove the div with jquery like so:
$("#textToRemove").remove();
here are what you want.
function Delete(){
$('#con').text('');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-xs-12">
<p id='con'>
Congratulations! Here is your submitted post.
</p>
<p class post-details>Lorem ipsum</p>
</div>
<button onclick='Delete()'>Delete</button>
This question already has answers here:
How do I change the text of a span element using JavaScript?
(18 answers)
Closed 5 years ago.
I want to know what javascript code I can use to edit the text of this word?
This is not a duplicate because this has multiple divs in a div. And the target word is located in a div that is inside the more divs.
<div id="jump">
<div class="kick">
<div class="meet">
<div class="balls">
<div class="word">
Hello
</div>
</div>
</div>
It's the 1st element that has this class...
document.getElementsByClassName('word')[0].innerHTML='Goodbye';
It's the 5th element that has this tag...
document.getElementsByTagName('div')[4].innerHTML='Goodbye';
You can use next code:
document.querySelector('.word').textContent = 'Hello World!';
<div id="jump">
<div class="kick">
<div class="meet">
<div class="balls">
<div class="word">
Hello
</div>
</div>
</div>
But if you has few elements with class word, function 'querySelectror fining only first element'.If you need get many elements, you can use document.querySelectorAll --- is HTMLCollection (not array).
I don't recommend to use getElementByClassName - is very slowly method.
Method getElementsByTagName -faster that querySelectorAll , but it use only tagName. getElementById -is the fastest menthod finding of elements.
But that method find only first element with current ID.
This question already has answers here:
<h1>, <h2>, <h3>... tags, inline within paragraphs (<p>)
(6 answers)
Closed 6 years ago.
If i have a p element
<p> simple text <h3> this is h3 text </h3> </p>
And i do this.
alert($('p').html());
It should give output simple text <h3> this is h3 text</h3>
But it alerts only simple text. I thought Ok may be .html() does not output html tags
But when i add any html using jquery in same p element , And then alert in same way it gives me result which is expected(it shows html tags as well) .
This is example
https://jsfiddle.net/04f1drby/
Can someone explain why this different behaviour ? Thanks in advance
If you go into chrome inspector for the JS fiddle page you linked you'll notice the HTML gets rendered as this:
<p id="firstp">
simple text</p><h3>
this is h3 text
</h3>
<p></p>
A closing paragraph tag is added just before your starting header tag.
This question already has answers here:
Why does some of my text within html paragraph tag fall outside of the <p></p>when in browser
(3 answers)
Closed 7 years ago.
I was just testing something and noticed that text inside pre tag does not appear if you access it using parent element.
Following is the code example:
JSFiddle
(function() {
var _innerText = document.getElementById("content").innerText;
var _innerHTML = document.getElementById("content").innerHTML;
var _textContent = document.getElementById("content").textContent;
console.log(_innerText, _innerHTML, _textContent)
console.log($("#content").text());
})()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<p id="content">
p text
<pre>Pre text</pre>
<small>small text</small>
</p>
I also noticed that anything after it is also not fetched. If you move small before pre, text appears. What could be the reason for it?
You cannot nest block-level elements, such as <pre>, inside <p> in HTML. Your code block rendered as following in browser.
<p id="content"> p text </p>
<pre>Pre text</pre>
<small>small text</small>
<p></p>
You can use div instead of p.
Because you can't put "pre" in "p" tag, try "div":
<div id="content">
p text
<pre>Pre text</pre>
<small>small text</small>
</div>
This question already has answers here:
How to find the closest event element
(2 answers)
Closed 7 years ago.
I opened post where i asked for assistance with jquery code:
How to find the closest event element
unfortunately, other user didn't read my issue.
I have A link. clicking on it will show/toggle div. my problem is that my div is not always located at the same level from the A link. sometimes the A link is 1 level upon the hide DIV. sometime it's 2 levels or more. sometime it's below it
how can I find the closest DIV, that contain the class ".hidebox", to the A link?
<a href="#" class="hideBox-tab " >show div</a>
$(".hideBox-tab").click(function(){
$(this)
.parent().parent()
.find(".hideBox")
.toggle();
return false;
});
If you and an <a> to show/toggle the div the <a> must be outside the div:
toggle and show div
<div class="hideBox">
Content here
</div>
Then you need to find in your HTML one tag that allways englobes a.hideBox-tab and div.hideBox.
For example: div.partial-content:
<div class="partial-content">
toggle and show div
<div class="hideBox">
Content here
</div>
</div>
And your JS will be like this:
$(".hideBox-tab").click(function(){
$(this).closest(".partial-content").find(".hideBox").toggle();
});
I created a snippet, take a look at it:
$(".hideBox-tab").click(function(){
$(this).closest(".partial-content").find(".hideBox").toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="partial-content">
toggle and show div
<div class="hideBox">
Content here
</div>
</div>
<div class="partial-content">
toggle and show div
<div>
<div class="hideBox">
Content 2 here
</div>
</div>
</div>
This solution works for one or more levels between a.hideBox-tab and div.hideBox.