javascript - Change a dom using .replaceWith - Stack Overflow

admin管理员组

文章数量:1335606

I have some code that does almost exactly what I want. It changes all the strong tags to styled h3 tags, which is perfect, but for the life of me I can't figure out what to replace ".click" with to make it run automatically. I tried ".ready" and it gives me an error in my jquery.

$(document).ready(function(){
    $('strong').click(function(){
        $(this).replaceWith($('<h3 style="margin:0px;display:inline;">' + this.innerHTML + '</h3>'))
    })
});

I have some code that does almost exactly what I want. It changes all the strong tags to styled h3 tags, which is perfect, but for the life of me I can't figure out what to replace ".click" with to make it run automatically. I tried ".ready" and it gives me an error in my jquery.

$(document).ready(function(){
    $('strong').click(function(){
        $(this).replaceWith($('<h3 style="margin:0px;display:inline;">' + this.innerHTML + '</h3>'))
    })
});

• javascript
• jquery
• replacewith

Share Improve this question Follow asked Jun 3, 2015 at 20:58 horribly_n00biehorribly_n00bie 7911 silver badge1212 bronze badges 1

• What error do you get? – Alex McMillan Commented Jun 3, 2015 at 20:59

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 5

I'd suggest just going straight to replaceWith():

// most (if not all) jQuery methods iterate over
// the collection to which they're chained:
$('strong').replaceWith(function () {

  // here 'this' is the individual <strong> element over
  // which the method iterates, and we return the created element:
  return $('<h3 style="margin:0px;display:inline;">' + this.innerHTML + '</h3>');
});

$('strong').replaceWith(function () {
  return $('<h3 style="margin:0px;display:inline;">' + this.innerHTML + '</h3>');
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<strong>1</strong>
<strong>2</strong>
<strong>3</strong>
<strong>4</strong>

Incidentally, in plain JavaScript, this is also quite easily possible:

// creating a <h2> element:
var heading = document.createElement('h2'),
// initialising an empty variable:
  clone;

// setting the display and margin properties:
heading.style.display = 'inline';
heading.style.margin = '0';

// using Function.prototype.call() to use
// Array.prototype.forEach() on the array-like
// NodeList returned by document.querySelector():
Array.prototype.forEach.call(document.querySelectorAll('strong'), function(bold) {

  // cloning the created <h2> element:
  clone = heading.cloneNode();

  // setting its innerHTML:
  clone.innerHTML = bold.innerHTML;

  // traversing to the parentNode, and
  // using Node.replaceChild() to replace
  // existing <strong> element with the
  // cloned <h2> element:
  bold.parentNode.replaceChild(clone, bold);
});

var heading = document.createElement('h2'),
  clone;

heading.style.display = 'inline';
heading.style.margin = '0';

Array.prototype.forEach.call(document.querySelectorAll('strong'), function(bold) {

  clone = heading.cloneNode();

  clone.innerHTML = bold.innerHTML;

  bold.parentNode.replaceChild(clone, bold);
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<strong>1</strong>
<strong>2</strong>
<strong>3</strong>
<strong>4</strong>

References:

• JavaScript:
  • Element.innerHTML.
  • Node.cloneNode().
  • Node.parentNode.
  • Node.replaceChild().
• jQuery:
  • replaceWith().

You want to use each() so it iterates over all of them.

$('strong').each(function(){ ... });

What you are doing is adding a handler to all the <strong> elements on the page that will trigger whenever one of them is clicked. If you want to perform the replace as soon as the document is ready try this:

$(document).on('ready', function () {
    $('strong').each(function () {
        $(this).replaceWith($('<h3 style="margin:0px;display:inline;">' + this.innerHTML + '</h3>'));
    });
});

This should do it.

$(document).ready(function(){
    $('strong').each(function(){
        $(this).replaceWith($('<h3 style="margin:0px;display:inline;">' + this.innerHTML + '</h3>'))
    })
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<strong>1</strong>
<strong>2</strong>
<strong>3</strong>

本文标签： javascriptChange a dom using replaceWithStack Overflow