用js创建p标签,并赋予文本1234,添加到div标签中
时间: 2024-03-05 17:47:49 浏览: 101
好的,可以使用以下代码来实现:
```javascript
// 获取div标签
var div = document.querySelector('div');
// 创建p标签
var p = document.createElement('p');
// 给p标签赋值
var text = document.createTextNode('1234');
p.appendChild(text);
// 将p标签添加到div标签中
div.appendChild(p);
```
这段代码中,首先通过 `document.querySelector` 方法获取到了一个 div 标签,并将其赋值给变量 `div`。然后使用 `document.createElement` 方法创建了一个 p 标签,并将其赋值给变量 `p`。接着使用 `document.createTextNode` 方法创建了一个文本节点,并将其赋值给变量 `text`,然后将文本节点添加到 p 标签中。最后使用 `appendChild` 方法将 p 标签添加到 div 标签中。
相关问题
用jquery创建p标签,并赋予文本1234,添加到div标签中
可以使用以下代码来创建一个带有文本的 `<p>` 标签,并将其添加到一个指定的 `<div>` 元素中:
```javascript
// 创建一个新的 <p> 标签
var p = $("<p>");
// 设置 <p> 标签的文本内容
p.text("1234");
// 将 <p> 标签添加到指定的 <div> 元素中
$("div").append(p);
```
请注意,这里的 `$` 符号是 jQuery 库的别名,如果你尚未引入 jQuery 库,请先引入它。
创建一个V-FONTCOLOR全局自定义指令,该指令赋予一个P标签,P标签内容为LWY,字体颜色默认为黑色,创建两个按钮,按钮的文本信息分别是红色,蓝色,点击红色按钮,P标签内容的字体颜色改为红色,使用const指令
在Vue.js中,你可以创建一个全局自定义指令`v-foncolor`,通过JavaScript定义并注册这个指令,然后给P标签添加这个指令,以便于改变其字体颜色。下面是一个简单的示例:
首先,在你的Vue实例的配置文件或全局脚本中,定义指令:
```javascript
// src/main.js 或者 main.ts (取决于你的Vue版本)
import Vue from 'vue'
export const fonColor = {
bind(el, binding, vnode) {
el.style.color = binding.value || 'black'; // 默认值设为黑色
binding.value = 'red'; // 当按钮切换时,将颜色设置为红色
},
update(el, binding, vnode) {
el.style.color = binding.value;
}
}
Vue.directive('v-foncolor', fonColor);
```
接着,在模板中,创建一个包含P标签的组件,并添加两个按钮用于切换颜色:
```html
<template>
<div>
<p v-foncolor>LWY</p>
<button @click="changeColor('red')">红色</button>
<button @click="changeColor('blue')">蓝色</button>
</div>
</template>
<script>
export default {
methods: {
changeColor(color) {
this.$nextTick(() => {
this.$el.querySelector('p').vFonColor = color; // 使用指令名,注意大小写
});
},
},
};
</script>
```
在这个例子中,当你点击红色按钮时,会触发`changeColor`方法,将`v-foncolor`指令的值设置为红色,从而使P标签的文字变为红色。
阅读全文