javascript - JQuery replace html element contents if ID begins with prefix - Stack Overflow

admin管理员组

文章数量:1335552

I am looking to move or copy the contents of an HTML element. This has been asked before and I can get innerHTML() or Jquery's html() method to work, but I am trying to automate it.

If an element's ID begins with 'rep_', replace the contents of the element after the underscore.

So,

<div id="rep_target">
Hello World.
</div>

would replace:

<div id="target">
Hrm it doesn't seem to work..
</div>​

I've tried:

$(document).ready(function() {
    $('[id^="rep_"]').html(function() {
        $(this).replaceAll($(this).replace('rep_', ''));
    });
});​

-and-

$(document).ready(function() {
    $('[id^="rep_"]').each(function() {
        $(this).replace('rep_', '').html($(this));
    });
​});​

Neither seem to work, however, this does work, only manual:

var target = document.getElementById('rep_target').innerHTML;
document.getElementById('target').innerHTML = target;

Related, but this is only text. JQuery replace all text for element containing string in id

I am looking to move or copy the contents of an HTML element. This has been asked before and I can get innerHTML() or Jquery's html() method to work, but I am trying to automate it.

If an element's ID begins with 'rep_', replace the contents of the element after the underscore.

So,

<div id="rep_target">
Hello World.
</div>

would replace:

<div id="target">
Hrm it doesn't seem to work..
</div>​

I've tried:

$(document).ready(function() {
    $('[id^="rep_"]').html(function() {
        $(this).replaceAll($(this).replace('rep_', ''));
    });
});​

-and-

$(document).ready(function() {
    $('[id^="rep_"]').each(function() {
        $(this).replace('rep_', '').html($(this));
    });
​});​

Neither seem to work, however, this does work, only manual:

var target = document.getElementById('rep_target').innerHTML;
document.getElementById('target').innerHTML = target;

Related, but this is only text. JQuery replace all text for element containing string in id

• javascript
• jquery
• html
• replace
• innerhtml

Share Improve this question Follow edited May 23, 2017 at 12:12 CommunityBot 111 silver badge asked Apr 24, 2012 at 0:05 Caleb RoselandCaleb Roseland 9311 gold badge22 silver badges66 bronze badges 3

• where does the replacement e from? do you want to transfer-replace (transfer an existing content to replace target)? or clone-replace (copy an existing content and replace target)? – Joseph Commented Apr 24, 2012 at 0:10
• General ments: you are using html wrong in your example: html takes a string, not a function, as an argument. Similarly you are using replace incorrectly; if you want to change an attribute (any attribute, including "id") you should use attr. I think the latter confusion es from misunderstanding what exactly $(foo) returns: it's not the element's ID, nor is it the element itself (or elements). Instead, it's a wrapper around the element(s), something like [element1, element2, ...], but with extra methods that an array normally wouldn't have. Hope that helps. – machineghost Commented Apr 24, 2012 at 0:22
• I'm a JS noob. I need to take the formatted HTML contents from id="rep_target1" and replace or append the contents of id="target1". Basically, search for all elements that have id="rep_X" then find and replace id="X" there are multiple instances on the page with different X values... – Caleb Roseland Commented Apr 24, 2012 at 22:43

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

You have two basic options for the first part: replace with an HTML string, or replace with actual elements.

Option #1: HTML

$('#target').html($('#rep_target').html());

Option #2: Elements

$('#target').empty().append($('#rep_target').children());

If you have no preference, the latter option is better, as the browser won't have to re-construct all the DOM bits (whenever the browser turns HTML in to elements, it takes work and thus affects performance; option #2 avoids that work by not making the browser create any new elements).

That should cover replacing the insides. You also want to change the ID of the element, and that has only one way (that I know)

var $this = $(this)
$this.attr($this.attr('id').replace('rep_', ''));

So, putting it all together, something like:

$('[id^="rep_"]').each(function() {
    var $this = $(this)
    // Get the ID without the "rep_" part
    var nonRepId = $this.attr('id').replace('rep_', '');
    // Clear the nonRep element, then add all of the rep element's children to it
    $('#' + nonRepId).empty().append($this.children());

    // Alternatively you could also do:
    // $('#' + nonRepId).html($this.html());

    // Change the ID
    $this.attr(nonRepId);

    // If you're done with with the repId element, you may want to delete it:
    // $this.remove();
});

should do the trick. Hope that helps.

Get the id using the attr method, remove the prefix, create a selector from it, get the HTML code from the element, and return it from the function:

$('[id^="rep_"]').html(function() {
  var id = $(this).attr('id');
  id = id.replace('rep_', '');
  var selector = '#' + id;
  return $(selector).html();
});

Or simply:

$('[id^="rep_"]').html(function() {
  return $('#' + $(this).attr('id').replace('rep_', '')).html();
});

From my question, my understanding is that you want to replace the id by removing the re-_ prefix and then change the content of that div. This script will do that.

$(document).ready(function() {
    var items= $('[id^="rep_"]');
    $.each(items,function(){
       var item=$(this);
       var currentid=item.attr("id");
       var newId= currentid.substring(4,currentid.length);
        item.attr("id",newId).html("This does not work");        
        alert("newid : "+newId);
    });    

});

Working Sample : http://jsfiddle/eh3RL/13/

本文标签： javascriptJQuery replace html element contents if ID begins with prefixStack Overflow