I am looking to manipulate the DOM of a page and in one area I need to return the below:
<p class="styles_label__gDrbZ"><span><a href="/philadelphia">PHL</a></span><span>Review</span></p>
As
<p class="styles_label__gDrbZ"><span><a href="/philadelphia">PHL</a></span> <span>Review</span></p>
I cannot seem to work out how to do this - any help much appreciated
There are multiple ways to achieve this, two approaches which immediately I can think of is -
:nth-child() Selector.insertAfter()Below is the implmentation using the :nth-child(), selecting the first child which is the <span> tag within the <p> tag.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("p span:nth-child(1)").append(" ");
});
</script>
</head>
<body>
<p class="styles_label__gDrbZ"><span><a href="/philadelphia">PHL</a></span><span>Review</span></p>
</body>
</html>