在学习和使用JavaScript时，创建和删除页面元素是网页交互中非常常见的操作。它们是动态网页制作的基础，允许开发者在客户端对网页内容进行即时的更新和调整。
创建新元素是通过JavaScript操纵DOM（文档对象模型）来完成的。创建新元素的方法主要有两种：一种是直接修改父元素的innerHTML属性，这种方法简单快捷，但缺点是效率较低，特别是当父元素本身包含较多内容时；另一种方法是使用document.createElement()创建新元素，然后使用document.createTextNode()添加文本节点，最后通过appendChild()或insertBefore()方法将新创建的元素添加到指定父元素下。后者方法虽然编码复杂度较高，但性能更优，因为它只涉及到特定内容的更新，不涉及整个父元素的内容。
示例代码中，创建了一个按钮，当用户点击按钮时，会执行createNewElements函数。在这个函数中，首先获取了一个id为“p1”的元素，并使用innerHTML方法为其添加了新的内容。接着，创建了一个<span>元素，向其中添加了文本节点，并将其添加到了id为“p2”的元素中。这种做法就是使用innerHTML和document.createElement()结合的方法，展示了两种不同创建元素的方法。
接着，来看如何删除元素。在网页上删除元素通常意味着使用removeChild()方法。这个方法不是直接作用于要删除的元素本身，而是需要先找到该元素的父元素，然后通过父元素调用removeChild()方法，并将需要删除的元素作为参数传入。在示例代码中，定义了一个函数deleteElement()，该函数首先获取了一个id为“del”的元素，然后通过调用其父元素的removeChild()方法来删除它。这种操作实现了对指定DOM节点的完全删除。
而当需要删除某个父元素下的所有子元素时，可以通过获取父元素后，遍历其childNodes列表，并使用removeChild()方法逐个删除。在提供的代码片段中，有一个函数deleteChilds()，它获取了一个<ul>元素，并检查它是否有子节点。如果有，就遍历其子节点列表，并依次删除每一个子节点。这样，原本属于<ul>的所有子元素都被移除了。
总结来看，在JavaScript中创建和删除元素涉及到了DOM操作，这包括但不限于innerHTML、createElement、appendChild、removeChild等方法的使用。它们为网页动态内容的实现提供了可能。在实际开发中，需要根据具体的需求选择合适的方法，并考虑性能和操作的复杂度，来决定使用哪一种创建或删除元素的方式。以上介绍的方法和示例代码可作为参考，以便于更好地掌握JavaScript操作DOM的技能。
