怎样在当前节点的第一个子元素节点之前增加子元素节点或子文本节点

使用: ParentNode.prepend();

var parent = document.body;

// 添加元素子节点
var p = document.createElement(‘p‘);
parent.prepend(p);

// 添加文本子节点
parent.prepend(‘Hello‘);

// 添加多个元素子节点
var p1 = document.createElement(‘p‘);
var p2 = document.createElement(‘p‘);
parent.prepend(p1, p2);

// 添加元素子节点和文本子节点
var p = document.createElement(‘p‘);
parent.prepend(‘Hello‘, p);

注意:

1. 增加的子节点类型可以是文本节点 或 元素节点;

2. 增加的子节点可以是多个;

原文地址:https://www.cnblogs.com/aisowe/p/11528888.html

时间: 2024-08-29 03:32:47

怎样在当前节点的第一个子元素节点之前增加子元素节点或子文本节点的相关文章

父元素如何围住浮动子元素

当元素使用float属性,将脱离文档流,因此父元素便不会包围它. <section> <div class="左栏"> 我是左栏 我是左栏 我是左栏 我是左栏 </div> <div class="右栏"> 我是右栏 </div> </section> <footer>我是页脚</footer> CSS样式如下: section{ border: 1px solid #3

LinearLayout的gravity属性以及其子元素的layout_gravity何时有效;RelativeLayout如何调整其子元素位置只能用子元素中的属性来控制,用RelativeLayout中的gravity无法控制!!!

LinearLayout的gravity属性以及其子元素的layout_gravity何时有效 转自:http://www.cnblogs.com/xiaoran1129/archive/2013/03/26/2982733.html 相信对于Android的初学者来说,大家都曾经被layout里这两个极其相似的属性迷惑过. 简单使用一下搜索工具,我们就不难找到下面这样的答案: layout_gravity 表示组件自身在父组件中的位置 gravity             表示组件的子组件在

二、vue学习--父元素如何获取子元素的值,子元素如何获取父元素的值

下图是父元素: 下图是子元素,获取父元素的值,使用props定义属性,这样就可以获取到父元素上传过来的set .place.type,拿到值就可以做一些自己的逻辑处理 二.子元素给父元素传值? 下图为子元素将值传递出去的方式,使用emit将值公布给父元素,见下图: 父元素需要接受子元素给的值,在父元素中相应的要有propMethods属性,这个属性可以使用v-on的方式绑定,也可以使用@propMethods的方式,见下图: 上图中的login是处理事件,这里点击按钮时需要子元素来触发事件,所以

【父元素parent】【子元素children】【同胞siblings】【过滤】

1.父元素 $("span").parent()           //定位到span的父元素 $("span").parents()          //定位到span的所有父元素 $("span").parents("ul")          //定位到span的ul父元素 $("span").parentsUntil("div");              //指定span

css 父元素的宽度随子元素的宽度变化

当最外面的层想要设置一个 overflow: hidden,但子元素又想他们能滚动,像今日头条的滚动导航一样: html: <div id="wrapper"> <ul id="scroll"> <li>cell 1</li> <li>cell 2</li> <li>cell 3</li> <li>cell 4</li> <li>cel

JavaScript基础 删除属性removeAttribute 删除Body节点下第一个子节点的style属性

镇场诗: 清心感悟智慧语,不着世间名与利.学水处下纳百川,舍尽贡高我慢意. 学有小成返哺根,愿铸一良心博客.诚心于此写经验,愿见文者得启发.------------------------------------------ code: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"

css父元素背景覆盖其子元素背景

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 8 .test1{ 9 width: 100px; 10 height: 100px; 11 border: 1px solid green; 12 background: green; 13 position: absol

父元素给定背景,子元素添加内容时背景改变了,怎嘛解决?

<div class="mui-scroll agree-main"> //用agree-main加了背景色 <div class="mui-content" style="background-color: transparent!important;"> //用style="background-color: transparent!important;"可以解决问题 <div class=&

js遍历 子节点 子元素

Js 节点 子元素 属性 方法 // 添加子节点前 删除所有子节点 var usernameEle = document.getElementById("username"); var childs = usernameEle.childNodes; for(var i = childs.length - 1; i >= 0; i--) { usernameEle.removeChild(childs[i]); } var username = document.createTe