如何为HTML中JS动态生成的p段落应用指定CSS样式与onclick功能

样式复用 #

如果你的站点是用全局标签选择器p定义的通用样式，动态创建的p元素默认就会继承所有样式，无需额外配置。
如果站点是通过类名给p元素设置的样式，创建p元素时给它加上对应的通用类名即可：
p.classList.add('你站点p元素的通用类名')
注意：你原有代码中给p设置了固定id text，多次插入会出现DOM id重复的问题，建议删除固定id配置，改用类名标识元素

点击事件复用 #

推荐使用事件委托方案，只需绑定一次事件，就能同时作用于原有p元素和后续动态插入的p元素，性能和维护性更好：

// 绑定到p元素共同的父容器（你代码中是div元素）
document.querySelector('div').addEventListener('click', function(e) {
  // 匹配点击目标是否为p元素
  if (e.target.tagName.toLowerCase() === 'p') {
    // 这里写入原有p元素的点击触发逻辑即可
  }
})

如果你不想修改原有事件绑定逻辑，也可以在创建p元素时单独绑定事件：

// 先抽离原有p元素的点击逻辑为公共函数
function pClickHandler(e) {
  // 原有onclick逻辑
}

// 你的插入逻辑修改如下
document.querySelector('button')
  .addEventListener('click', function() {
     const p = document.createElement('p');
     // 加通用类保证样式一致
     p.classList.add('site-p-common-class');
     // 绑定点击事件
     p.addEventListener('click', pClickHandler);
    
    const val = document.getElementById('forminput').value.trim();
    if (val.length) {
      // 如果不需要渲染HTML标签，建议用textContent代替innerHTML，避免XSS注入风险
      p.textContent = val;
      document.querySelector('div').appendChild(p);
    }
});

内容的提问来源于stack exchange，提问作者Anthony Stephen Mendes