使用原生JS开发Meme生成器 表单提交后文字无法覆盖图片

核心问题 #

1. 错误的元素嵌套逻辑：<img> 是自闭合标签，不支持嵌套任何子元素，你当前代码把文字的 <h1> 插入到 <img> 内部，浏览器会直接忽略这段无效的DOM结构，所以文字根本不会渲染。
2. 定位容器层级错误：你现在把 position: relative 加在所有meme的外层容器 #memeSection 上，后续如果生成多个meme，所有文字都会定位到整个容器的左上角，全部堆叠在一起，无法对应到各自的图片上。
3. CSS选择器匹配错误：你写的 #memeSection > h1 是匹配 #memeSection 直接子级的h1，就算你把h1放到正确位置，这个选择器也无法匹配到嵌套在meme内部的文字元素，样式不会生效。

解决方案 #

1. 修改JS逻辑，给每个meme单独套容器

'use strict';

let count=0;

// 表单提交逻辑
document.getElementById('memeInput').addEventListener('submit',function(e){
    count++;
    e.preventDefault();
    let bottomText = document.getElementById('bottomText').value;
    // 先创建单个meme的独立容器
    const memeContainer = document.createElement('div');
    memeContainer.className = 'meme-item';
    memeContainer.id = 'meme-' + count;
    document.getElementById('memeSection').appendChild(memeContainer);
    // 把容器传入方法复用
    createMeme(memeContainer);
    appendTop(memeContainer);
})

function createMeme(container){
    let image = document.getElementById('imageLink').value;
    let meme = document.createElement("img");
    container.appendChild(meme);
    meme.src=image;    
}

function appendTop(container){
    let topText = document.getElementById('topText').value;
    let top = document.createElement("h1");
    // 文字插入到容器内，不是img内
    container.appendChild(top);
    top.className = "meme-top-text";
    top.innerHTML = topText;
}

2. 修改CSS样式

#memeSection{
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.meme-item {
    position: relative;
    overflow: hidden;
}

.meme-item > img{
    height:60vh;
    display: block;
}

.meme-top-text{
    position:absolute;
    top: 10px;
    left: 0;
    right: 0;
    text-align: center;
    color:white;
    text-shadow: 0 0 3px #000;
    margin: 0;
}

3. 可选规范优化

你原HTML中把<container>写在<body>外不符合W3C规范，调整到<body>内部即可，不影响核心功能。

内容的提问来源于stack exchange，提问作者davdev