Develop Reference

How to prevent remove inside span using contenteditable?

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>

I want to add html tag without ending tag

I want to add html tag without ending tag like that <div class="bottom-widget"> . For that I use jQuery prepend() method but full tag was added by this !
Html Markup -
<div class="widget">
<h2>this is content 1</h2>
</div>
</div>
Javascript Code :
$(".widget").prepend('<div class="bottom-widget">');

Perhaps you are looking for wrapInner function.
And you code will be:
$(".wrapInner").wrapInner("<div class='bottom-widget'>");

I assume you need correct html so after this opening tag you will have another with closing one. For this reason you can use jQuery wrapInner function (http://api.jquery.com/wrapinner/)
First extract(or create) the element you want to be wrapped in your bottom-widget element, than create bottom-widget element and insert above-mentioned element into it.

$(".widget").prepend("<div class='bottom-widget'></div>");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="widget">
<h2>this is content 1</h2>
</div>

open div tag and close it in another place by javascript

is it possible by using JavaScript to open any tag, for example div#js and insert closing tag in any place I want, like on example below?
<div id="first"></div>
<div id="js">
<div id="second"></div>
<div id="third"></div>
</div>
<div id="fourth"></div>

If you start with:
<div id="first">1</div>
<div id="second">2</div>
<div id="third">3</div>
<div id="fourth">4</div>
and need to get this structure:
<div id="first">1</div>
<div id="js">
<div id="second">2</div>
<div id="third">3</div>
</div>
<div id="fourth">4</div>
the you can use $('#second').wrap('<div id="js"></div>').after($('#third')).
See demo below:
$('#second').wrap('<div id="js"></div>').after($('#third'));
#js {
color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="first">1</div>
<div id="second">2</div>
<div id="third">3</div>
<div id="fourth">4</div>

As you've tagged your code jQuery, I'll answer it in that sense. If you're programmatically inserting a div element into the page with juery, like this:
var bodyEl = $("body");
var myJsEl = $("<div>").attr("id", "js");
bodyEl.append(myJsEl);
... As has been noted, the $("<div>") code is the functional equivalent of document.createElement("div"), which creates the code block, both opening and closing the DOM element. Thus, when I create the element by either approach, programmatically speaking, the close is not something I can control.
That said, in the "bad old days" of document.write(), we did have the option of hard-coding opening tags and neglecting to include closing tags. DON'T DO THIS! It's deprecated, it's bad form and it can create serious coding issues later.

JQuery find text nodes with not selector on nested elements work only with .contents() and filter()

Please help me understand why this is happening.
(UPDATE) TL;DR:
nested elements' text will be included when using find with not(NESTED_ELEMENT) selector but will be excluded when using find with not(NESTEDT_ELEMENT)+contents+filter(TEXT_NODE).
I want to get the text from a page but to exclude some elements.
For the simplicity, I have excluded <p> element only (and descendants) but when I use the text(), I'm also getting the text in the excluded element.
When I filter the results with contents() to include only text nodes, only then the not selector is "working" by not returning the text from the excluded elements. Please see image below with the code used:
Why isn't it working without using contents()?
Thanks.
For your convenience:
The URL that I tested on is this one.
The code that gives me the excluded element's text:
$('body').find(':not(p, p *)').text()
The code that gives me the desired text (excluded element's text not present):
$('body').find(':not(p, p *)').contents().filter(function(){return this.nodeType == 3}).text()
And here's the HTML part from the URL. As you can see, there's a <p> element there and As described, I want to get the text from this HTML but to exclude some elements (p was selected for simplicity, there will be lots more rules in production).
<div class="col-lg-12">
<header id="header" role="banner" class="jumbotron">
<h1>
<img src="/img/icon/apple-touch-icon-114-precomposed.png" class="offscreen" alt="">
<i class="icon-html5" aria-hidden="true"></i><span class="offscreen">HTML 5</span>
<span>Semantics and Accessibility: <span class="subheader">Heading Structure</span></span>
</h1>
<p class="lead" id="lead_content">The more you understand the specification, the more you'll realize there are more right
ways to implement <em>proper</em> semantic HTML markup than wrong. Thinking in terms of web accessibility can provide direction.</p>
</header>
</div>

Try using .clone() , .remove() , .text()
var filtered = $(".col-lg-12").clone();
filtered.find("p").remove();
console.log(filtered.text())
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div class="col-lg-12">
<header id="header" role="banner" class="jumbotron">
<h1>
<img src="/img/icon/apple-touch-icon-114-precomposed.png" class="offscreen" alt="">
<i class="icon-html5" aria-hidden="true"></i><span class="offscreen">HTML 5</span>
<span>Semantics and Accessibility: <span class="subheader">Heading Structure</span></span>
</h1>
<p class="lead" id="lead_content">The more you understand the specification, the more you'll realize there are more right ways to implement <em>proper</em> semantic HTML markup than wrong. Thinking in terms of web accessibility can provide direction.</p>
</header>
</div>

Selecting specific contenteditable divs with jQuery

Given the following html for a type of blog post editor:
<div class="entry">
<div class="title" contenteditable="true">
<h2>Title goes here</h2>
</div>
<div class="content" contenteditable="true">
<p>content goes here</p>
</div>
</div>
I'm trying to use jquery to select the .title and .content divs to attach unique event handlers to each.
$('[contenteditable]').on(...);
works for both but
$('[contenteditable] .title').on(...);
or
$('.title').attr('contenteditable', 'true').on(...);
both don't work to select the specific contenteditable block.

You could use the attribute selector in CSS .title[contenteditable="true"].
jsFiddle example
.title[contenteditable="true"] {
background: red;
}
In jQuery: $('.title[contenteditable]').css("background","red")
jsFiddle example

For the first example you have to remove the space between the attribute selector and the class selector, as a space implies descendance.
$('[contenteditable].title').on("click", function(){
$(this).css('color', 'orange');
});
Example: http://jsfiddle.net/2Bsk4/