I want to take inner HTML (both tags and text) of an element and put it in textarea, but somehow it is not working. How can I make it work and why is this not working?
HTML:
<div id="element">
<p>Some text</p>
<p>Some text</p>
</div>
<button>Click Me</button>
JS:
$("button").click(function(){
$("#element").html("<textarea>"+$("#element").text($("#element").html())+"</textarea>");
});
DEMO
$("#element").text($("#element").html())
there's your problem
it should be
$("#element").text()
JSFiddle
edit:
updated fiddle
Related
I have some HTML being fed in to me for blogs and want to be able to ensure it's parsed properly.
I am using this jQuery function (below) to ensure text is being wrapped in a paragraph tag however it seems to be filtering out the strong and a tags into their own paragraph tags.
Here is the original HTML:
<div id="demo">
<h2>This is a title</h2>
This is content that will need to be wrapped in a paragraph tag <strong>and this is bold</strong> and this is a link.<br />
More content here.
</div>
Now using this function to filter this:
$('#demo')
.contents()
.filter(function() {
return this.nodeType === 3 && $.trim(this.textContent).length;
})
.wrap('</p>');
Renders me this HTML:
<div id="demo">
<h2>This is a title</h2>
<p>This is content that will need to be wrapped in a paragraph tag </p>
<strong>and this is bold</strong>
<p> and this is a </p>
link.
<p>More content here.</p>
</div>
As you can see, I'm getting half of what I need but it's separating the HTML elements outside of the paragraph tag. Is there a way I can allow these HTML elements to remain inside the paragraph tag?
Thanks
You can store the h2 element, remove it from the structure, wrap what remains and add back in the h2.
let cloned = $("#demo > h2").clone(); // Clone the <h2>
$("#demo > h2").remove(); // Remove the <h2>
$("#demo").wrapInner("<p>"); // Wrap everyting left over
cloned.insertBefore("p"); // Put <h2> back
console.log($("#demo").html());
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="demo">
<h2>This is a title</h2>
This is content that will need to be wrapped in a paragraph tag <strong>and this is bold</strong> and this is a link.
More content here.
</div>
I have a editor using HTML 5 tag contenteditable, there i'm using span inside contenteditable, when i remove all text then span also removed but i want span should not be removed, how to prevent it?
My Code:--
$('#editor').keyup(function(){
$('#spanText').text($(this).find('span').text());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div contenteditable="true" id="editor"><span>This is my text</span></div>
<br><br><hr>
<div id="spanText"></div>
I think there is no straightforward way to achieve that.
You can check the text length of the element to restore the element back.
Demo:
$('#editor').keyup(function(){
if(!$(this).text().length){
$(this).html('<span> </span>');
}
$('#spanText').text($(this).find('span').text().trim());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<div contenteditable="true" id="editor"><span>This is my text</span></div>
</div>
<hr>
<div id="spanText"></div>
Move the contenteditable property to the span
<div>
<span contenteditable="true" id="editor">This is my text</span>
</div>
Basically what the title says - I'm wondering if there's a way to use .find() on the same jQuery selector multiple times. Or maybe using .find() more than once isn't the right way to do this?
Here's what I'm trying to accomplish:
HTML
<div id="foo">
<h2>A Header</h2>
<p>Some text</p>
</div>
JS
$("#foo").find("h2").html("New header");
$("#foo").find("p").html("New text");
Webstorm complains about the duplicated jQuery selector. Is there a different/better way to do this?
You can use next():
$("#foo").find("h2").html("New header")
.next("p").html("New Text");
To go back to a previous collection in chaining, we can use end()
$("#foo")
.find("h2")
.html("New header")
.end()
.find("p")
.html("New text");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="foo">
<h2>A Header</h2>
<p>Some text</p>
</div>
Use .addBack() to back to first selector after using .find() in chaining.
$("#foo").find("h2").html("New header").addBack().find("p").html("New text");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="foo">
<h2>A Header</h2>
<p>Some text</p>
</div>
The "right way" (the simplest way at least) is to use basic CSS selector syntax:
$("#foo h2").html("New header");
$("#foo p").html("New text");
Or more specifically, this:
$("#foo>h2").html("New header");
$("#foo>p").html("New text");
The first example targets any h2 that is a descendant of foo at any level, whereas the second targets any h2 that is an immediate descendant.
As for trying to do something like this:
x = $("#foo").find("h2").find("p");
This is equivalent to this:
x = $("#foo h2 p");
(You can verify this by going into debug after executing the statement and looking at x.selector.) Which means that you are looking for a paragraph inside a header inside foo:
<div id="foo">
<h2>A Header
<p>**Selector would find this**</p>
</h2>
</div>
And there isn't any such in your example.
<div id="foo">
<h2>A Header</h2>
<p>Some text</p>
</div>
var $foo = $("#foo");
$foo.find("h2").html("New header");
$foo.find("p").html("New text");
OR, if it's possible:
<div id="foo">
<h2>A Header</h2>
<p>Some text</p>
</div>
var htmlString = '<h2>New header</h2><p>New text</p>';
$("#foo").html( htmlString );
It says duplicated jQuery selector because you should ( when possible ) always cache your jQuery selectors, because it's wasteful calling $("#foo") each time you need that object.
So, your code should become like this
HTML
<div id="foo">
<h2>A Header</h2>
<p>Some text</p>
</div>
JS
var foo = $("#foo");
foo.find("h2").html("New header");
foo.find("p").html("New text");
I'll try to explain my problem)
I have a DIV element with content like:
<div contenteditable>
<p>Some text</p>
<p>Some text</p>
<p><img src="myserver/path/image.jpg"></p>
<p id="111">Some text</p>
<p><img src="myserver/path/image.jpg"></p>
<p>Some text</p>
</div>
And I want to paste some outside html content in the middle of this - for example - after id=111 parag.
This outside html content looks like:
<p>Some text</p>
<p><img src="OUTERSERVER/path/image.jpg"></p>
<p>Some text</p>
<p><img src="OUTERSERVER/path/image.jpg"></p>
<p>Some text</p>
But this outside html content should be formatted automatically. Why?
Because I should change img src "OUTERSERVER/path" to "myserver/path" for pasted content only.
Im really tired with this problem. Can you help me please?)
I use javascript only.
If you want to do it with pure javascript. then it should be look like
function insertAfter(refer, external) {
refer.parentNode.insertBefore(external, refer.nextSibling);
}
var external = document.getElementById('external');
var refer = document.getElementById('111');
insertAfter(refer, external);
please go through the link for more details of the html
working demo
So simply, I am trying to find and unwrap elements on my page. There is a slight problem going wrong with my WYSIWYG editor, and I need to apply a fix.
For example:
This is how my HTML currently looks like
<h1>
<p>Some text here</p>
<p>Some text here</p>
<p>Some text here</p>
<img src="images/img.jpg" />
</h1>
<h1>
<p>Some text here</p>
<p>Some text here</p>
</h1>
This how how my HTML should look like
<p>Some text here</p>
<p>Some text here</p>
<p>Some text here</p>
<img src="images/img.jpg" />
<p>Some text here</p>
<p>Some text here</p>
How can I completely remove the h1 tag?
This is my attempt. I am running this once the entire page has been loaded.
if ($('h1').find('p').length) {
$('p', this).unwrap();
}
PS. This always occurs at random, there is no pattern. Can sometimes happen to many elements, and sometimes only to a few.
you can select the children of h1 and unwrap them like
$('h1 > *').unwrap();
var $h1 = $('h1');
$h1.contents().unwrap();
$h1.remove()
Demo: Fiddle
Note: the value referred by this will not change inside the if condition - from the way use have used it I assume you are thinking this inside the if block is referring to the h1 element
You can use .replaceWith():
$('h1').replaceWith(function() { return $(this).find('*'); });
Fiddle Demo