零基础快速入门前端 图片水印生成 蓝桥杯真题速刷(助力保底拿奖不捐款)

完成后的效果如下for (let i 0; i count; i) { let spandocument.createElement(span) span.innerHTMLtext span.style.colorcolor span.style.transformrotate(${deg}deg) span.style.opacityopacity container.appendChild(span) }1.appendChild及其他追加元素的方法appendChild作用将一个节点Node添加到指定父节点的子节点列表末尾。返回值返回刚刚添加的节点。特点如果添加的节点已存在于文档中它会从原位置移除再添加到新位置移动操作。只能接收一个节点参数不能直接添加字符串或多个节点。// 示例 const parent document.getElementById(container); const child document.createElement(span); parent.appendChild(child);其他常用追加方法方法所属对象参数类型特点append()Element / Document / DocumentFragment可接收多个节点或字符串文本自动将字符串转为文本节点无返回值。支持追加多个内容。prepend()同上同上将内容插入到父节点的第一个子节点之前。after()Element / CharacterData同上将内容插入到当前元素之后作为相邻兄弟节点。before()同上同上将内容插入到当前元素之前。insertAdjacentElement()/insertAdjacentHTML()/insertAdjacentText()Element位置 内容更精细地控制插入位置beforebegin,afterbegin,beforeend,afterend。对比示例// 假设 container 内原本为空 container.append(span1, 一些文字, span2); // 末尾添加多个内容 container.prepend(span3); // 开头添加 span1.after(span4); // 在 span1 后面插入 span4注意appendChild是传统 DOM 方法性能通常更好但灵活性较低append是较新的现代方法使用更方便。2.createElement可以创建哪些元素document.createElement(tagName)用于创建一个由tagName指定的 HTML 元素节点。标准 HTML 元素任何有效的 HTML 标签名如div,span,p,a,img,input,button,table,ul,li等。自定义元素可以创建带连字符的自定义标签名符合 Web Components 规范如my-element。特殊命名空间元素若要创建 SVG 元素如svg,circle,path需使用document.createElementNS(http://www.w3.org/2000/svg, svg)。类似地MathML 元素需指定http://www.w3.org/1998/Math/MathML命名空间。// 常见例子 const div document.createElement(div); const img document.createElement(img); img.src photo.jpg; const custom document.createElement(my-card);注意创建的元素默认不在 DOM 树中需要手动插入如使用appendChild。3.transform属性详解transform是 CSS 属性用于对元素进行二维或三维变换。你代码中的span.style.transform rotate(${deg}deg) 只是其中一种用法。常用变换函数二维函数说明示例rotate(angle)旋转角度deg, rad, turn, gradrotate(45deg)translate(x, y)平移px, %translate(10px, 20px)scale(x, y)缩放数字1 为原始大小scale(1.5, 0.8)skew(x-angle, y-angle)倾斜skew(10deg, 5deg)matrix(a, b, c, d, tx, ty)组合变换矩阵matrix(1,0,0,1,10,10)三维变换常用rotateX(angle)/rotateY(angle)/rotateZ(angle)translate3d(x, y, z)scale3d(x, y, z)perspective(length)– 透视距离多重变换可以同时应用多个变换用空格分隔执行顺序从右向左常见相关属性transform-origin变换的中心点默认中心50% 50%。backface-visibility当元素旋转到背面时是否可见。transform-stylepreserve-3d允许子元素保持 3D 位置。span.style.transform rotate(${deg}deg);这会使每个span元素绕自身中心旋转deg度正值为顺时针。如果你希望同时做其他变换可以写成span.style.transform rotate(${deg}deg) translateX(20px);总结追加元素appendChild是经典方法一次一个节点append/prepend/after/before更灵活支持多节点和文本。创建元素createElement可创建任意标准或自定义标签注意 SVG 需用createElementNS。transform强大的变换属性常用旋转、平移、缩放、倾斜支持 2D/3D可通过空格组合多个效果。