Django跨模板传递HTML标签内容问题求助

你的问题核心在于：JavaScript只能操作当前页面的DOM元素，如果目标标签在另一个独立页面（跳转后的模板），当前页面的JS无法直接访问；如果是模板继承/包含的拆分场景，则可能是JS执行顺序导致找不到元素。下面分两种情况给出解决办法：

情况1：模板继承/包含（最终渲染为同一页面） #

如果两个模板是通过{% extends %}或{% include %}组合成同一个页面，问题大概率是JS执行时目标元素还没加载完成。调整代码如下：

• 把脚本放到页面底部，或者用DOMContentLoaded事件确保DOM加载完成后再执行：

<script>
document.addEventListener('DOMContentLoaded', function() {
  const sourceEl = document.getElementById("teste");
  const targetEl = document.getElementById("texto");
  if (sourceEl && targetEl) {
    targetEl.innerHTML = sourceEl.innerHTML;
  }
});
</script>

• 确保源元素（id="teste"）在目标元素（id="texto"）之前渲染，或者脚本放在</body>标签前。

情况2：完全独立的两个页面（跳转后传递内容） #

如果是从一个页面跳转到另一个页面，此时两个页面的DOM环境完全独立，JS无法跨页面读取元素，需要通过后端或前端存储传递内容：

方法1：Django后端传递（推荐） #

利用Django的session或视图上下文传递内容：

1. 源页面视图：将需要传递的内容存入session

def source_page(request):
    # 这里可以动态获取源标签的内容，比如从模型、表单或request中提取
    transfer_content = "context"
    request.session['transfer_content'] = transfer_content
    return render(request, 'source.html', {'content': transfer_content})

2. 目标页面视图：从session中读取内容，传入模板上下文

def target_page(request):
    transfer_content = request.session.get('transfer_content', '')
    # 可选：获取后清除session，避免内容残留
    # del request.session['transfer_content']
    return render(request, 'target.html', {'content': transfer_content})

3. 目标模板直接渲染内容：

<div id="texto">{{ content }}</div>

方法2：前端存储传递 #

用localStorage或sessionStorage临时存储内容：

1. 源页面脚本：存储内容

document.addEventListener('DOMContentLoaded', function() {
  const sourceContent = document.getElementById("teste").innerHTML;
  localStorage.setItem('transfer_content', sourceContent);
});

2. 目标页面脚本：读取并渲染内容

document.addEventListener('DOMContentLoaded', function() {
  const content = localStorage.getItem('transfer_content');
  if (content) {
    document.getElementById("texto").innerHTML = content;
    // 可选：读取后清除存储
    // localStorage.removeItem('transfer_content');
  }
});

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