Jquery "before" add close tag of button

Question

i have following HTML element:-

<a href="http://localhost/wordpress/post-2/#more-4" class="more-link">

I tried to add a button before span (put span between button) with jQuery before function:

<script>
    $(document).ready(function() {
        $("a.more-link").before("<button class=\"btn btn-default\">");
    }); 
</script>

The output is:

<button class="btn btn-default"></button>
<a href="http://localhost/wordpress/post-2/#more-4" class="more-link">
    <span aria-label="Continue reading post 2">(more…)</span>
</a>

The following </button> tag is added automatically! Why? Can I not add a span between button tags? How can I prevent that or is there any way to add span between button tags?

$(document).ready(function() {
  $("a.more-link").before("<button class=\"btn btn-default\">");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button class="btn btn-default"></button>
<a href="http://localhost/wordpress/post-2/#more-4" class="more-link">
    <span aria-label="Continue reading post 2">(more…)</span>
</a>

You can only add whole elements to the DOM. If you want to add a `span` inside the button, you can just `append()` it in the same way you create the button. What is the HTML output you're trying to create? — Rory McCrossan, Feb 23 '17 at 11:25
@MahsumAkbas so if you got answer then mark+up-vote that answer. you can up-vote others too if they are useful. If still have problem then let us know. — Alive to die - Anant, Feb 23 '17 at 11:51

score 1 · Answer 1 · edited May 23 '17 at 11:53

You can't open a tag without close it that not a valid HTML, so the browser will always validate your HTML code by adding the closed tag.

If you want to wrap your span by button you could add it in your js using the jQuery method wrap() :

$( "a.more-link" ).wrap("<button class='btn btn-default'>");

NOTE : If you do so your HTML isn't valid since you shouldn't put an anchor a inside a button tag.

(PLEASE TAKE A LOOK TO Nesting <a> inside <button> doesn't work in Firefox).

Hope this helps.

$( "a.more-link" ).wrap("<button class='btn btn-default'/>");

console.log ( $('button')[0].outerHTML );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a href="http://localhost/wordpress/post-2/#more-4" class="more-link">My link </a>

score 0 · Answer 2 · answered Feb 23 '17 at 11:26

$(document).ready(function(){
    $( "a.more-link" ).before( "<button class=\"btn btn-default\"><span>I'm a span</span></button>" );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="http://localhost/wordpress/post-2/#more-4" class="more-link">

score 0 · Answer 3 · answered Feb 23 '17 at 12:08

0

zakaria is right you can't open a tag without closing it, wrap span within button, use this

$( "a.more-link span" ).wrap("<button class='btn btn-default'>");

answered Feb 23 '17 at 12:08

iWasCloud

107
2
13

score -1 · Answer 4 · answered Feb 23 '17 at 11:26

-1

Use jquery wrap function.

<script>
    $(document).ready(function(){
       $( "a.more-link" ).wrap( "<button class=\"btn btn-default\">" );
    }); 
</script>

answered Feb 23 '17 at 11:26

VJAI

32,167
23
102
164

You cannot place an `` within a ` – Rory McCrossan Feb 23 '17 at 11:31

score -1 · Answer 5 · answered Feb 23 '17 at 11:28

-1

I'm not sure what you exactly need, but try if wrap function is what you are looking for:

$( "a.more-link" ).wrap( "<button class=\"btn btn-default\">" )

answered Feb 23 '17 at 11:28

malvarez

276
2
13

You cannot place an `` within a ` – Rory McCrossan Feb 23 '17 at 11:32

Jquery "before" add close tag of button

5 Answers5