To turn:
<img src="whatever.jpg" />
<span>Copyright Stackoverflow</span>
Into:
<img src="whatever.jpg" />
<figcaption>Copyright Stackoverflow</figcaption>
I'd suggest:
// selecting the relevant elements,
// using the replaceWith() method to
// replace those found elements:
$('img + span').replaceWith(function(){
// returning a string comprised of the HTML tags,
// surrounding the text from the 'this' (the current
// <span> element of the jQuery collection) node:
return '<figcaption>' + this.textContent + '</figcaption>'
});
$('img + span').replaceWith(function(i, el) {
return '<figcaption>' + this.textContent + '</figcaption>'
});
span {
color: limegreen;
}
figcaption {
color: #f90;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="whatever.jpg" />
<span>Copyright Stackoverflow</span>
JS Fiddle demo.
Or, in order to retain event-handlers on any child elements:
// a simple function bound to the click event
// on the <span> element within a parent <span>
// element:
$('span > span').click(function () {
console.log('woo');
})
// finding the relevant <span> elements:
$('img + span').replaceWith(function () {
// returning a created <figcaption> element,
// after appending the contents of the
// found <span> element(s):
return $('<figcaption>').append($(this).contents());
});
$('span > span').click(function() {
console.log('woo');
})
$('img + span').replaceWith(function() {
return $('<figcaption>').append($(this).contents());
});
span {
color: limegreen;
}
figcaption {
color: #f90;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="whatever.jpg" />
<span><span>Copyright</span> Stackoverflow</span>
JS Fiddle demo.
Alternatively, in native JavaScript:
// creating a named function, and its arguments:
function replaceWith(original, tag) {
// tag: String, the element-type to be created,
// here we remove any '<' or '>' characters, to
// ensure that '<fieldset>' becomes 'fieldset':
tag = tag.replace(/<|>/g, '');
// creating a new element of that type:
var newEl = document.createElement(tag);
// setting the innerHTML of the created element
// that of the original element:
newEl.innerHTML = original.innerHTML;
// replacing the original child with the new element:
original.parentNode.replaceChild(newEl, original);
}
// finding the relevant elements:
var elements = document.querySelectorAll('img + span'),
// converting the collection of elements into an
// an Array:
elementArray = Array.prototype.slice.call(elements, 0);
// iterating over the Array using Array.prototype.forEach():
elementArray.forEach(function (elem) {
// calling the function, passing in the current array-element
// of the array over which we're iterating:
replaceWith(elem, '<figcaption>')
});
function replaceWith(original, tag) {
tag = tag.replace(/<|>/g, '');
var newEl = document.createElement(tag);
newEl.innerHTML = original.innerHTML;
original.parentNode.replaceChild(newEl, original);
}
var elements = document.querySelectorAll('img + span'),
elementArray = Array.prototype.slice.call(elements, 0);
elementArray.forEach(function(elem) {
replaceWith(elem, '<figcaption>')
});
span {
color: limegreen;
}
figcaption {
color: #f90;
}
<img src="whatever.jpg" />
<span>Copyright Stackoverflow</span>
JS Fiddle demo.
Further, if you wish to retain event-handlers on child elements – using native JavaScript:
// finding the <span> elements with a <span> parent:
document
.querySelector('span > span')
// adding a simple anonymous function as the
// handler for the click event:
.addEventListener('click', function () {
// logging a simple message to the console:
console.log('woo')
});
function replaceWith(original, tag) {
tag = tag.replace(/<|>/g, '');
var newEl = document.createElement(tag);
// this is the only change, while the
// original element contains a firstChild node
// we append that child-node to the newly
// created-element:
while (original.firstChild) {
// using Node.appendChild to move the firstChild
// of the original node into the created-element:
newEl.appendChild(original.firstChild)
}
original.parentNode.replaceChild(newEl, original);
}
var elements = document.querySelectorAll('img + span'),
elementArray = Array.prototype.slice.call(elements, 0);
elementArray.forEach(function (elem) {
replaceWith(elem, '<figcaption>')
});
document.querySelector('span > span').addEventListener('click', function() {
console.log('woo')
});
function replaceWith(original, tag) {
tag = tag.replace(/<|>/g, '');
var newEl = document.createElement(tag);
while (original.firstChild) {
newEl.appendChild(original.firstChild)
}
original.parentNode.replaceChild(newEl, original);
}
var elements = document.querySelectorAll('img + span'),
elementArray = Array.prototype.slice.call(elements, 0);
elementArray.forEach(function(elem) {
replaceWith(elem, '<figcaption>')
});
span {
color: limegreen;
}
figcaption {
color: #f90;
}
<img src="whatever.jpg" />
<span><span>Copyright</span> Stackoverflow</span>
JS Fiddle demo.
References:
