用jquery将文本更改为h1？

Question

How do I make the 2990 kr text into an h1 ?

<div class="productPrice">
<span>2 990 kr</span>
</div>

Alt 1 http://api.jquery.com/html/

$(".productPrice").html("h1");

Alt 2 http://api.jquery.com/text/

 $(".productPrice").text("h1");

Answer 1

使用.wrapAll() ：

$('.productPrice span').wrapAll('<h1></h1>');

Answer 2

.wrapInner() method can be used.

Wrap an HTML structure around the content of each element in the set of matched elements.

  $('.productPrice span').wrapInner('<h1 />') 

 $('.productPrice span').wrapInner('<h1 />') 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="productPrice"> <span>2 990 kr</span> </div> 

The above solution will produce, <span><h1>...</h1></span> which is invalid. Instead use wrap()

Wrap an HTML structure around each element in the set of matched elements.

 $('.productPrice span').wrap('<h1 />') 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="productPrice"> <span>2 990 kr</span> </div> 

Answer 3

While this is easily possible with jQuery:

// selecting the '.productPrice' elements, and
// and wrapping the inner content (to avoid
// creating an <h1> element within a <span>:
$('.productPrice').wrapInner('<h1></h1>');

This is also – of course – possible with plain JavaScript:

// creating a function that takes two arguments,
// toWrap: the Node whose contents should be wrapped,
// wrapWith: the element-type with which those contents
//           should be wrapped:
function wrapInner(toWrap, wrapWith) {

    // retrieving the contents of the element to wrap:
    var contents = toWrap.childNodes,

        // the newly-created element type:
        newElem = document.createElement(wrapWith);

    // inserting the new element before the first of the
    // the node's childNodes:
    toWrap.insertBefore(newElem, contents[0]);

    // while contents exist:
    while (contents.length) {
      // move the first of those contents into the
      // new element:
      newElem.appendChild(contents[0]);
    }
}

// retrieving the '.productPrice' elements with
// document.querySelectorAll(); and converting
// Array-like NodeList into an Array, using
// Array.from():
var elements = Array.from( document.querySelectorAll('.productPrice') );

// iterating over the array of elements, using
// Array.prototype.forEach():
elements.forEach(function (el) {
    // calling the function, passing the node
    // and the string for the replacement-element:
    wrapInner(el, 'h1');
});

 function wrapInner(toWrap, wrapWith) { var contents = toWrap.childNodes, newElem = document.createElement(wrapWith); toWrap.insertBefore(newElem, contents[0]); while (contents) { newElem.appendChild(contents[0]); } } var elements = Array.from(document.querySelectorAll('.productPrice')); elements.forEach(function(el) { wrapInner(el, 'h1'); }); 

 <div class="productPrice"> <span>2 990 kr</span> </div>